.carousel{--img-w: 16;--img-h: 9;--inactive-w: 10;--gap-w: 1.5;--active-w: calc(100 - 2 * (var(--inactive-w) + var(--gap-w)));position:relative;width:100%;max-width:100%;font-size:1em;aspect-ratio:calc(var(--img-w) * 100) / calc(var(--img-h) * var(--active-w));overflow:hidden}.carousel .item{position:absolute;top:0;bottom:0;border-radius:1.5em;overflow:hidden;cursor:pointer;transition:left .5s cubic-bezier(.2,0,0,1),width .5s cubic-bezier(.2,0,0,1),opacity .5s cubic-bezier(.2,0,0,1)}.carousel .item img{width:100%;height:100%;object-fit:cover;pointer-events:none}.carousel .item .content{position:absolute;inset:0;padding:1.25em;background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 85%,transparent) 90%);display:flex;justify-content:space-between;align-items:end;gap:1em;opacity:0;transform:translateY(.5em);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.carousel .item .content .content-text{flex:1;min-width:0}.carousel .item .content .content-text h3{margin:0 0 .2em;font-size:1.2em}.carousel .item .content .content-text p{margin:0;font-size:.9em}.carousel .item.prev:before,.carousel .item.next:before{position:absolute;inset:0;background-color:color-mix(in srgb,var(--bg),transparent 25%);font-family:Material Symbols Rounded;font-size:2.5em;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease-in-out;z-index:2;pointer-events:none}.carousel .item.out-left{left:calc((var(--inactive-w) * -1.5) * 1%);width:calc(var(--inactive-w) * 1%);opacity:0}.carousel .item.prev{left:0;width:calc(var(--inactive-w) * 1%);opacity:1}.carousel .item.prev:before{content:"keyboard_arrow_left"}.carousel .item.prev:hover:before{opacity:1}.carousel .item.active{left:calc((var(--inactive-w) + var(--gap-w)) * 1%);width:calc(var(--active-w) * 1%);opacity:1;cursor:auto}.carousel .item.active:hover .content{opacity:1;transform:translateY(0);pointer-events:all}.carousel .item.active:hover img{transform:scale(1.02)}.carousel .item.next{left:calc((100 - var(--inactive-w)) * 1%);width:calc(var(--inactive-w) * 1%);opacity:1}.carousel .item.next:before{content:"keyboard_arrow_right"}.carousel .item.next:hover:before{opacity:1}.carousel .item.out-right{left:115%;width:calc(var(--inactive-w) * 1%);opacity:0}@media only screen and (max-width:600px){.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;aspect-ratio:unset;gap:0;padding:1.5em 0;scrollbar-width:none}.carousel::-webkit-scrollbar{display:none}.carousel .item{position:relative;left:auto!important;width:85%!important;flex:0 0 85%;scroll-snap-align:center;display:flex;flex-direction:column;overflow:visible;transform:scale(.92);opacity:.5;transition:transform .4s cubic-bezier(.2,0,0,1),opacity .4s cubic-bezier(.2,0,0,1)}.carousel .item.prev:before,.carousel .item.next:before{display:none!important}.carousel .item:first-child{margin-left:10%}.carousel .item:last-child{margin-right:10%}.carousel .item img{height:auto;aspect-ratio:var(--img-w) / var(--img-h);border-radius:1.5em}.carousel .item .content{position:relative;inset:auto;opacity:0;transform:translateY(.3em);pointer-events:none;padding:1em 0;background:transparent;color:inherit;align-items:center;transition:opacity .3s ease,transform .3s ease}.carousel .item.is-center{transform:scale(1);opacity:1}.carousel .item.is-center .content{opacity:1;transform:translateY(0);pointer-events:all}.carousel .item:hover img{transform:none}}
