@import 'https://unpkg.com/open-props'layer(design.system);@import 'https://unpkg.com/open-props/normalize.dark.min.css' layer(demo.support);@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..900&display=swap');@layer demo.base{:root{--sm-font-size:0.875rem;--size:min(759px,100dvw)}.card-content section{display:grid;justify-content:center;gap:var(--size-2);& header{display:flex;align-items:center;gap:var(--size-2);>img{inline-size:2.5rem;aspect-ratio:var(--ratio-square);border-radius:var(--radius-round)}& p{font-size:var(--sm-font-size);font-weight:var(--font-weight-6)}& i{color:var(--blue-5)}>div{display:flex;align-items:center;gap:var(--size-1)}@media (width < 468px){padding-inline:var(--size-3)}}.card{display:flex;flex-direction:column;gap:var(--size-3);position:relative;& button{background:transparent}.visual{display:grid;grid-auto-flow:column;grid-auto-columns:var(--size);inline-size:var(--size);block-size:var(--size);height:100%;width:100%;-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}& img{inline-size:var(--size);border-radius:var(--radius-1);border:var(--border-size-1) solid var(--stone-11);width:100%;height:100%;object-fit:contain}}.controls{position:absolute;z-index:1;inset-inline:var(--size-2);inset-block-start:50%;display:flex;justify-content:space-between}& button{inline-size:var(--size-8);border-radius:var(--radius-round);aspect-ratio:var(--ratio-square);font-size:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding:0;box-shadow:var(--shadow-1);color:var(--stone-1);transition:color 0.2s ease;&:hover{color:var(--stone-2)}}}.pagination{position:absolute;z-index:1;inset-inline:0;inset-block-end:var(--size-5);display:flex;justify-content:center;gap:var(--size-1);& button{display:inline-flex;place-content:center;inline-size:0.5ex;flex-shrink:0;aspect-ratio:var(--ratio-square);border-radius:var(--radius-round);background-color:hsl(0 0% 100%/ 60%)}}.social{display:grid;gap:var(--size-1);& button{background-color:unset;font-size:var(--font-size-3);padding:0}.inter{display:flex;align-items:center;justify-content:space-between;>div{display:flex;gap:var(--size-3)}}& p{font-size:var(--sm-font-size);font-weight:var(--font-weight-6)}@media (width < 468px){padding-inline:var(--size-3)}}}}@layer demo.scroll-driven-animation{.visual{scroll-snap-type:x mandatory;overscroll-behavior:contain;scroll-behavior:smooth;scroll-timeline:--carousel inline;>*{scroll-snap-align:center}& img{view-timeline-axis:inline;perspective:var(--size)}}.pagination>button{animation:scale linear both}.next{animation:auto next ease;animation-timeline:--carousel}.previous{animation:auto prev ease;animation-timeline:--carousel}}@keyframes scale{0%,100%{scale:0.75}50%{scale:1;background-color:white}}@keyframes prev{from{visibility:hidden}}@keyframes next{to{visibility:hidden}}