.frame[data-astro-cid-zon6vhil]{position:relative;margin-inline:auto}.popover[data-astro-cid-zon6vhil]{transition:opacity 0.3s ease-in-out;display:grid;position:absolute;padding-block:var(--dap-size-2);padding-inline:var(--dap-size-2);width:23ch;background:var(--dap-pink);border-radius:var(--radius-lg);line-height:var(--leading-tight);color:white;text-wrap:balance;z-index:2;text-align:center;translate:-50% 0%;&[data-astro-cid-zon6vhil]::before{align-self:center;justify-self:center;content:"";position:absolute;width:30px;height:30px;background:inherit;border-radius:var(--radius-xs);rotate:45deg;z-index:-1}&.arrow-left::before{left:-6px}&.arrow-top::before{top:-6px}&.arrow-bottom::before{bottom:-6px}&.arrow-right::before{right:-6px}&.popover-1{top:42%;left:28%;&.arrow-top::before{translate:250% 0%}}&.popover-2{top:50%;left:50%}&.popover-3{top:50%;left:25%}&.popover-4{top:58%;left:18%}}swiper-slide[data-astro-cid-zon6vhil]:not(.swiper-slide-active){z-index:-1;.popover {opacity: 0;}}swiper-slide[data-astro-cid-zon6vhil]{padding-block-end:3rem}swiper-container[data-astro-cid-zon6vhil]{--swiper-theme-color: var(--dap-gray-8);--swiper-pagination-bullet-size: 12px;--swiper-pagination-bullet-inactive-color: var(--dap-gray-8);&[data-astro-cid-zon6vhil]::part(pagination){//position: relative;//z-index: 999}}[data-astro-cid-zon6vhil][data-click-target]{position:absolute;left:20%;top:30%;width:60%;height:10%;background:transparent}[data-astro-cid-zon6vhil][data-slide-2]{transition:opacity 0.3s ease-in-out}dap-card[data-astro-cid-zon6vhil]{width:42%;height:auto;position:absolute;left:29%;top:18%}.bg-shop[data-astro-cid-t5r4zaqy]{background-position:center;background-size:cover;aspect-ratio:1/1.4}#social-media[data-astro-cid-t5r4zaqy]{position:relative;padding:0;.content {width: 100%; padding-block: min(16vw,var(--dap-size-10)); padding-inline: min(8vw,var(--dap-size-10)); @media (width >= 1024px){width: 120%; padding: var(--dap-size-10) var(--dap-size-9); padding-left: 0;}} .phones {display: inline-block; position: relative; text-align: center; width: 100%; & img {width: clamp(250px,30vw,400px); height: auto; margin-top: -30px;} .phone-clubcard {display: inline-block; aspect-ratio: var(--dap-ratio-creditcard); position: absolute; width: 30%; top: 48%; right: 23%;}} @media (width >= 1024px){.phones {width: 94%; margin-left: -30px; & img {width: 100%; margin-top: unset;} .phone-clubcard {position: absolute; width: 27%; top: 53%; right: 25%;}}}}@property --rotate1{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --rotate2{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@property --translate1{syntax: "<percentage>"; inherits: false; initial-value: 0%;}@property --translate2{syntax: "<percentage>"; inherits: false; initial-value: 0%;}@keyframes reveal-image{from{--rotate1: -10deg;--rotate2: 10deg;--translate1: 100%;--translate2: 80%;opacity:0}}#referral[data-astro-cid-t5r4zaqy]{position:relative;padding:0;.images {display: flex; justify-content: center; gap: 20px; padding-bottom: 60px; @media (width >= 1024px){display: grid; place-content: center; gap: 0; width: 40%; padding-bottom: 0;} img {width: clamp(100px,40vw,200px); height: auto; border-radius: var(--dap-radius-3); box-shadow: var(--dap-shadow-4);}} .content {padding-block: min(16vw,var(--dap-size-10)); padding-inline: min(8vw,var(--dap-size-10)); @media (width >= 1024px){width: 60%; padding: var(--dap-size-10) var(--dap-size-9); padding-left: 0;}} .referral-images {img { --rotate1: -6deg; --rotate2: 8deg; --translate1: 15%; --translate2: 25%; &:nth-child(1) { transform: translateY(var(--translate1)) translateX(4%) rotate(var(--rotate1)); } &:nth-child(2) { transform: translateY(var(--translate2)) translateX(-4%) rotate(var(--rotate2)); } @media (width >= 1024px) { --rotate1: -3deg; --rotate2: -5deg; --translate1: 3%; --translate2: -3%; &:nth-child(1) { transform: translateY(var(--translate1)) translateX(0%) rotate(var(--rotate1)); } &:nth-child(2) { transform: translateY(var(--translate2)) translateX(5%) rotate(var(--rotate2)); } } }} @supports (animation-timeline: view(block)) {.reveal-referral-image {animation: reveal-image linear both; animation-timeline: view(); animation-range: cover 0% entry-crossing 40vh;}}}