@charset "UTF-8";
/* https://www.velo-pass.ch/wp-content/themes/Impreza-child/assets/velopass/css/how.css?ver=1791444703 */
.vlp-how{--vlp-how-media-h:286px;--vlp-how-band-top:calc(var(--vlp-how-media-h) * 0.55);--vlp-how-col-gap:clamp(0.75rem, 1.5vw, 1.5rem);position:relative;background:var(--vlp-color-bg);padding-block:clamp(3rem, 6vw, 4rem);padding-inline:0}.vlp-how__inner{width:100%;max-width:var(--vlp-container-width);margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(2.5rem, 5vw, 4rem)}.vlp-how__title{width:100%;margin:0;font-family:var(--vlp-font-heading);font-weight:700;font-size:clamp(1.75rem, 3.5vw, 42px);line-height:1.2;color:var(--vlp-color-heading);text-align:center}.vlp-how__steps{position:relative;z-index:0;list-style:none;margin:0;padding:0 clamp(0.5rem, 2vw, 2rem);width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--vlp-how-col-gap);align-items:start;justify-items:center}.vlp-how__steps::before{content:"";position:absolute;z-index:0;left:0;right:0;top:var(--vlp-how-band-top);bottom:0;background:var(--vlp-color-cream);-webkit-mask:url(https://www.velo-pass.ch/wp-content/themes/Impreza-child/assets/velopass/images/how/band.svg) no-repeat center / 100% 100%;mask:url(https://www.velo-pass.ch/wp-content/themes/Impreza-child/assets/velopass/images/how/band.svg) no-repeat center / 100% 100%;pointer-events:none}.vlp-how__step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:14.5rem;--vlp-how-badge:var(--vlp-brand-red);--vlp-how-rotate:0deg}.vlp-how__step--red{--vlp-how-badge:var(--vlp-brand-red)}.vlp-how__step--teal{--vlp-how-badge:var(--vlp-brand-teal)}.vlp-how__step--yellow{--vlp-how-badge:var(--vlp-brand-yellow)}.vlp-how__step--blue{--vlp-how-badge:var(--vlp-brand-blue)}.vlp-how__step--purple{--vlp-how-badge:var(--vlp-brand-purple)}.vlp-how__step:nth-child(1){--vlp-how-rotate:5.83deg}.vlp-how__step:nth-child(2){--vlp-how-rotate:-3.64deg}.vlp-how__step:nth-child(3){--vlp-how-rotate:2.51deg}.vlp-how__step:nth-child(4){--vlp-how-rotate:7.35deg}.vlp-how__step:nth-child(5){--vlp-how-rotate:-1.77deg}.vlp-how__step.vlp-how__step--no-tilt{--vlp-how-rotate:0deg}.vlp-how__media{position:relative;width:100%;height:var(--vlp-how-media-h);display:flex;align-items:center;justify-content:center}.vlp-how__badge{position:absolute;z-index:2;left:0;top:1.875rem;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:999px;background:var(--vlp-how-badge);color:#fff;font-family:var(--vlp-font-body);font-weight:800;font-size:2rem;line-height:26px;letter-spacing:.09px;text-align:center}.vlp-how__illu{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform:rotate(var(--vlp-how-rotate));transform-origin:center center}.vlp-how__img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}.vlp-how__placeholder{display:flex;align-items:center;justify-content:center;width:min(100%, 11.4rem);height:min(100%, 15.8rem);aspect-ratio:182 / 253;border:2px dashed rgb(10 14 26 / .18);border-radius:18px;background:rgb(10 14 26 / .03)}.vlp-how__placeholder-label{font-family:var(--vlp-font-body);font-size:.8125rem;font-weight:600;color:var(--vlp-color-text-light);letter-spacing:.02em;text-align:center;padding:.75rem}.vlp-how__step:nth-child(1):not(.vlp-how__step--media-empty) .vlp-how__illu{width:11.4rem;height:15.8rem;border:1px solid var(--vlp-color-blue-light);border-radius:18px;overflow:hidden;background:#fff}.vlp-how__step:nth-child(1):not(.vlp-how__step--media-empty) .vlp-how__img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center top}.vlp-how__copy{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:12.5rem;padding-top:.25rem;padding-bottom:clamp(1.25rem, 3vw, 2rem)}.vlp-how__step-title{margin:0 0 .75rem;font-family:var(--vlp-font-heading);font-weight:700;font-size:24px;line-height:1.167;letter-spacing:.09px;color:var(--vlp-color-heading)}.vlp-how__step-desc{margin:0;font-family:var(--vlp-font-body);font-weight:400;font-size:16px;line-height:1.625;letter-spacing:.05px;color:var(--vlp-color-text-light)}.vlp-how__step:nth-child(2) .vlp-how__copy,.vlp-how__step:nth-child(5) .vlp-how__copy{max-width:15.2rem}@media (max-width:1439.98px){.vlp-how{padding-inline:var(--vlp-inline-pad-tablet)}}@media (max-width:1023.98px){.vlp-how{overflow-x:clip}.vlp-how__title{overflow-wrap:anywhere;padding-inline:.25rem}.vlp-how__steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.25rem;padding-inline:0}.vlp-how{--vlp-how-media-h:240px}.vlp-how__steps::before{-webkit-mask:none;mask:none;border-radius:32px;top:var(--vlp-how-band-top);left:.5rem;right:.5rem;bottom:0}}@media (max-width:899.98px){.vlp-how__steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 1rem}.vlp-how{--vlp-how-media-h:220px}.vlp-how__step{max-width:16rem}.vlp-how__copy{max-width:15rem}}@media (max-width:599.98px){.vlp-how{--vlp-how-media-h:200px;padding-inline:var(--vlp-inline-pad-mobile)}.vlp-how__title{font-size:clamp(1.5rem, 7vw, 1.875rem);text-wrap:balance}.vlp-how__steps{grid-template-columns:1fr;gap:2rem;justify-items:center;padding-inline:0}.vlp-how__steps::before{display:none}.vlp-how__step{max-width:min(18rem, 100%);width:100%;overflow:hidden}.vlp-how__media{overflow:hidden;width:100%}.vlp-how__copy{max-width:none;padding-bottom:0}.vlp-how__step:nth-child(1):not(.vlp-how__step--media-empty) .vlp-how__illu{width:min(10rem, 70%);height:auto;aspect-ratio:182 / 253;max-width:100%}.vlp-how__badge{left:.5rem;top:.75rem;width:40px;height:40px;font-size:1.5rem}.vlp-how__step{--vlp-how-rotate:0deg}}