.offer-ugc-before-after{background:var(--ugc-ba-background, #f6f6f6);padding-top:var(--ugc-ba-padding-top, 56px);padding-bottom:var(--ugc-ba-padding-bottom, 56px)}.offer-ugc-before-after__header{margin:0 auto 40px;text-align:center}.offer-ugc-before-after__heading{margin:0;color:var(--ugc-ba-heading, #3f3f3f);font-family:proxima-nova,sans-serif;font-size:24px;font-style:normal;font-weight:700;line-height:140%;text-align:center;text-transform:capitalize}.offer-ugc-before-after__carousel{display:block;position:relative}.offer-ugc-before-after__track{display:grid;gap:var(--ugc-ba-gap, 24px);grid-template-columns:repeat(4,minmax(0,1fr))}.offer-ugc-before-after__slide{aspect-ratio:1 / 1;border-radius:var(--ugc-ba-radius, 8px);overflow:hidden;position:relative}.offer-ugc-before-after__image{display:block;height:100%;object-fit:cover;width:100%}.offer-ugc-before-after__image-placeholder{align-items:center;background:#eef0f1;color:#8a8f96;display:flex;font-family:proxima-nova,sans-serif;font-size:14px;height:100%;justify-content:center;width:100%}.offer-ugc-before-after__arrow{display:none}@media screen and (min-width:768px){.offer-ugc-before-after{padding-left:16px;padding-right:16px}}@media screen and (max-width:899px){.offer-ugc-before-after{padding-top:40px;padding-bottom:40px}.offer-ugc-before-after__track{-webkit-overflow-scrolling:touch;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.offer-ugc-before-after__track::-webkit-scrollbar{display:none}.offer-ugc-before-after__slide{flex:0 0 100%;scroll-snap-align:center}.offer-ugc-before-after__arrow{align-items:center;background:#000;border:none;border-radius:50%;cursor:pointer;display:flex;height:48px;justify-content:center;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:48px;z-index:2}.offer-ugc-before-after__arrow svg{display:block}.offer-ugc-before-after__arrow:focus-visible{outline:2px solid #ffffff;outline-offset:2px}.offer-ugc-before-after__arrow:disabled{cursor:default;opacity:.35}.offer-ugc-before-after__arrow--prev{left:-8px}.offer-ugc-before-after__arrow--next{right:-8px}}
/*# sourceMappingURL=/cdn/shop/t/456/assets/offer-ugc-before-after.css.map */