/* Figma 137:4866. The source sheet, portrait and caption are separate layers. */
.transformation-results{display:contents}
.transformation-switch{display:none}
.transformation{position:relative;background:#f8f7f3;border-radius:20px;padding:40px;overflow:hidden}
.transformation h2{font-weight:700;font-size:48px;line-height:1.059;text-align:left;margin:0 0 44px}
.transformation .comparison{grid-template-columns:1.255fr 1fr 1fr;gap:30px}
.transformation .comparison figure{min-width:0}
.transformation .comparison figcaption{font:600 22px/1.059 'Golos Text',Arial,sans-serif;color:#6e6e6e;margin:0 0 24px}
.transformation .polaroid-sheet{position:relative;padding:0;background:none;box-shadow:0 -2.296px 65.432px #a5a5a540;transform:rotate(.96deg);aspect-ratio:412.969/504.279}
.transformation .polaroid-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.transformation .polaroid-portrait{position:absolute;left:8.9%;top:6.9%;width:82.84%;height:76.82%;object-fit:cover}
.transformation .polaroid p{position:absolute;left:10.4%;top:86.5%;margin:0;font:400 18px/1.059 'Golos Text',Arial,sans-serif;color:#6e6e6e}
.transformation .result-photo>img{width:100%;height:auto;aspect-ratio:329/468;object-fit:cover;border:1px solid #fff;border-radius:10px}
.transformation .result-photo .badge{top:18px;right:14px;left:auto;padding:10px 15px;gap:6.603px;background:#0000008c;backdrop-filter:blur(51.05px);font:500 14px/1 Inter,Arial,sans-serif;white-space:nowrap}
.transformation .badge img{width:11.781px;height:11.781px}
.transformation .transformation-video .badge{height:36px;padding:0 15px 0 5px}
.transformation .transformation-video .badge img{width:28.534px;height:28.534px}
.transformation-arrow{position:absolute;left:28.3%;top:136px;width:129.574px;height:111.547px;background:#fead6e;mask:url('assets/body-imgRectangle19478.png') -9.708px -10.806px/151.532px 151.532px no-repeat;transform:scale(.85) rotate(125deg);pointer-events:none}
.transformation-progress{display:flex;gap:9px;margin:24px 0 0 37%;height:6px}
@media(min-width:1250px){
 .transformation{width:1194px;height:751px;padding:0;margin-left:auto;margin-right:auto}
 .transformation h2{position:absolute;left:43px;top:46.9px;font-size:54px;white-space:nowrap;margin:0}
 .transformation .comparison{display:contents}
 .transformation .comparison figure{position:absolute;margin:0}
 .transformation .polaroid{left:24px;top:143px;width:421.348px}
 .transformation .polaroid figcaption{margin-left:31px;margin-bottom:0}
 .transformation .polaroid-sheet{position:absolute;left:4.189px;top:38.419px;width:412.969px;height:504.279px}
 .transformation .polaroid-portrait{left:36.4px;top:34.9px;width:342.088px;height:387.401px}
 .transformation .polaroid p{left:38.3px;top:437.5px;white-space:nowrap}
 .transformation .transformation-photo{left:465px;top:154px;width:329px}
 .transformation .transformation-video{left:824px;top:154px;width:328px}
 .transformation .comparison .result-photo{margin-top:13.702px}
 .transformation .comparison .transformation-photo figcaption,.transformation .comparison .transformation-video figcaption{margin:0}
 .transformation .result-photo>img{height:468px}
 .transformation .transformation-photo .badge{left:180px;right:auto}
 .transformation .transformation-video .badge{left:216px;right:auto}
 .transformation-arrow{left:338.554px;top:136px}
 .transformation-progress{position:absolute;left:465px;top:683px;width:687px;margin:0}
}
@media(min-width:761px) and (max-width:1249px){
 .transformation h2{font-size:40px}
 .transformation .comparison{gap:20px}
 .transformation .comparison figcaption{font-size:18px}
 .transformation .polaroid p{font-size:14px}
 .transformation-arrow{top:130px;width:90px;height:80px;mask-position:-7px -8px;mask-size:108px 108px}
 .transformation .result-photo .badge{font-size:10px;padding:7px;right:8px}
}
@media(max-width:760px){
 .transformation{padding:28px 18px 32px}
 .transformation h2{font-size:30px;line-height:1.1;margin-bottom:30px}
 .transformation .comparison{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
 .transformation .polaroid{grid-column:1/-1;width:100%;max-width:300px;margin:auto}
 .transformation .comparison figcaption{font-size:14px;margin-bottom:16px}
 .transformation .polaroid p{font-size:13px}
 .transformation-arrow{display:none}
 .transformation .result-photo .badge{top:8px;right:6px;padding:5px 6px;gap:4px;font-size:9px}
 .transformation .badge img{width:9px;height:9px}
 .transformation .transformation-video .badge{height:25px;padding:0 6px 0 3px}
 .transformation .transformation-video .badge img{width:19px;height:19px}
 .transformation-progress{margin:18px 0 0}
}