.c-recipe-follow{z-index:2;background-color:#fff;grid-template-rows:auto 1fr auto;grid-auto-columns:minmax(0,1fr);width:100%;height:100%;display:grid;position:fixed;top:0;left:0}@media (width<=991.98px){.c-recipe-follow{grid-template-areas:"header""steps""footer"}}@media (width>=992px){.c-recipe-follow{grid-template-areas:"header header""gallery steps""footer footer"}}.c-recipe-follow.is-hidden{display:none}.c-recipe-follow__header{border-bottom:1px solid #f9f2ec;grid-area:header;justify-content:space-between;align-items:center;gap:20px;display:flex}@media (width<=767.98px){.c-recipe-follow__header{padding:15px 30px}}@media (width>=768px) and (width<=991.98px){.c-recipe-follow__header{padding:30px 40px}}@media (width>=992px){.c-recipe-follow__header{height:var(--header-height);padding:0 40px}}@media (width<=991.98px){.c-recipe-follow__logo{display:none}}@media (width<=767.98px){.c-recipe-follow__thumbnail{width:50px;height:50px}}@media (width>=768px) and (width<=991.98px){.c-recipe-follow__thumbnail{width:60px;height:60px}}@media (width>=992px){.c-recipe-follow__thumbnail{display:none}}.c-recipe-follow__title{text-wrap:balance;flex:1;font-size:1.125rem;line-height:1.3}@media (width<=991.98px){.c-recipe-follow__title{font-weight:400}}@media (width>=992px){.c-recipe-follow__title{font-weight:300}}.c-recipe-follow__close{background-color:#0000;border:none;align-items:center;gap:15px;padding:0;transition:color .3s;display:flex}.c-recipe-follow__close:hover{color:#cd001a}.c-recipe-follow__close-icon{color:#cd001a;background-color:#fcf7f2;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.c-recipe-follow__gallery{flex-direction:column;grid-area:gallery;gap:45px;padding:60px 30px 60px 60px;display:flex}@media (width<=991.98px){.c-recipe-follow__gallery{display:none}}.c-recipe-follow__image-wrapper{width:100%;height:100%;position:relative}.c-recipe-follow__image{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0}.c-recipe-follow__steps{scroll-snap-type:y mandatory;flex-direction:column;grid-area:steps;gap:30px;scroll-padding-top:30px;display:flex;overflow:auto}@media (width<=767.98px){.c-recipe-follow__steps{padding:30px}}@media (width>=768px) and (width<=991.98px){.c-recipe-follow__steps{padding:30px 40px}}@media (width>=992px){.c-recipe-follow__steps{padding:60px 60px 60px 30px}}.c-recipe-follow__step{scroll-snap-align:start;flex-direction:column;transition:opacity .5s;display:flex}@media (width<=767.98px){.c-recipe-follow__step{gap:30px}}@media (width>=768px){.c-recipe-follow__step{gap:45px}}.c-recipe-follow__step:last-child{flex:1 0 100%}.c-recipe-follow__step.is-inactive{opacity:.25}.c-recipe-follow__step-text{font-weight:300;display:flex}@media (width<=767.98px){.c-recipe-follow__step-text{flex-direction:column;gap:15px}}@media (width>=768px){.c-recipe-follow__step-text{gap:30px}}.c-recipe-follow__step-number{color:#cd001a}@media (width>=768px){.c-recipe-follow__step-number{min-width:25px}}.c-recipe-follow__end{background-color:#fcf7f2;flex-direction:column;gap:45px;height:100%;padding:60px;font-weight:300;display:flex}.c-recipe-follow__end-title{color:#cd001a;display:block}.c-recipe-follow__footer{background-color:#fcf7f2;grid-area:footer;padding:30px;display:flex}@media (width<=767.98px){.c-recipe-follow__footer{flex-direction:column;gap:20px}}@media (width>=768px){.c-recipe-follow__footer{gap:60px}}@media (width>=992px){.c-recipe-follow__footer{padding-left:40px;padding-right:40px}}.c-recipe-follow__progress{align-items:center;gap:17px;display:flex}@media (width>=768px){.c-recipe-follow__progress{flex:1}}.c-recipe-follow__progress-bar{background-color:#eee5dd66;border-radius:4px;width:100%;height:8px}.c-recipe-follow__progress-bar div{background-color:#cd001a;border-radius:4px;width:0;height:100%;transition:width .2s}.c-recipe-follow__buttons{gap:15px;display:flex}@media (width<=991.98px){.c-recipe-follow__back{display:none}}@media (width<=767.98px){.c-recipe-follow__next{width:100%}}@media (width>=768px){.c-recipe-follow__next{min-width:216px}}
