@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter+Mono:wght@400..700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{align-items:center;background:#f5f5f5;display:flex;flex-direction:column;font-family:Inter,sans-serif;gap:40px;justify-content:center;min-height:100vh;padding:40px 20px}body{background:#ffa5c1;color:#fff;overflow:hidden;position:relative}.header{align-items:center;display:grid;font:500 2.2vw/normal Inter,sans-serif;grid-template-columns:1fr auto 1fr;left:0;letter-spacing:-.03em;padding:25px;position:absolute;top:0;width:100%}.header p:last-child{text-align:right}.demo{cursor:grab;height:100vh;-webkit-user-select:none;user-select:none;--carousel-diameter: calc(2 * var(--carousel-radius));--carousel-gap: 390px;--carousel-item-aspect-ratio: calc(440 / 350);--carousel-item-width: 270px;--carousel-items: 12;--carousel-radius: calc((var(--carousel-item-width) + var(--carousel-gap)) / (2 * sin(3.1416 / var(--carousel-items))))}.demo.is-dragging{cursor:grabbing}.demo .container{height:var(--carousel-diameter);left:calc(50% - var(--carousel-diameter) / 2);position:absolute;top:0;width:var(--carousel-diameter);will-change:transform}.demo .carousel_item{display:flex;height:100%;justify-content:center;left:0;margin:0;padding:0;pointer-events:none;position:absolute;top:0;width:100%}.demo .item_anchor{border-radius:8px;cursor:pointer;display:block;height:calc(var(--carousel-item-width) * var(--carousel-item-aspect-ratio));margin:50vh 15px 0;max-width:none;overflow:hidden;pointer-events:auto;position:relative;text-decoration:none;transition:border-radius .4s cubic-bezier(.4,1.6,.6,1);width:var(--carousel-item-width);will-change:transform}.demo .item_image{filter:blur(0);height:100%;left:0;object-fit:cover;object-position:50% 100%;position:absolute;top:0;transform:scale(1.1);transition:filter .4s cubic-bezier(.4,1.6,.6,1),transform .4s cubic-bezier(.4,1.6,.6,1);width:100%}.demo .carousel_caption{background:none;bottom:8vh;color:#380921;font-family:Inter Mono,monospace;font-size:44px;font-weight:500;left:50%;letter-spacing:0em;line-height:1.1;margin-bottom:55px;max-width:320px;pointer-events:none;position:absolute;text-align:center;text-transform:uppercase;text-wrap:balance;transform:translate(-50%);-webkit-user-select:none;user-select:none;white-space:normal;width:100%;will-change:opacity,transform;word-break:break-word}@media (hover: hover) and (pointer: fine){.demo:has(.item_anchor:hover) .item_anchor:hover{border-radius:16px}.demo:has(.item_anchor:hover) .item_anchor:hover .item_image{filter:blur(0);transform:scale(1.15)}.demo:has(.item_anchor:hover) .item_anchor:not(:hover) .item_image{filter:blur(10px);transform:scale(1.075)}}@media (min-width: 641px) and (max-width: 1024px){.demo{--carousel-gap: 440px;--carousel-item-width: 320px}.demo .carousel_caption{font-size:54px;max-width:500px}}@media (min-width: 1025px){.demo{--carousel-gap: 480px;--carousel-item-width: 350px}.demo .carousel_caption{font-size:66px;max-width:600px}}