.carousel{min-width:0}.carousel-track-wrapper{position:relative}.carousel-track-wrapper>div{gap:var(--gutter-small);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;display:flex;overflow-x:auto}.carousel-arrow{display:none}.carousel .carousel-item{scroll-snap-align:start;width:30rem;max-width:100%;padding:var(--gutter-tiny);flex:none}.carousel .card{padding:var(--gutter-large) var(--gutter);height:100%}.carousel .card .tag{font-size:var(--font-small)}@media (hover:hover) and (pointer:fine){.carousel-arrow{width:var(--font-large);background:linear-gradient(90deg, rgba(var(--rgb-background), 0), rgba(var(--rgb-background), 1) 75%);cursor:pointer;opacity:1;z-index:10;border-radius:var(--border-radius-small);border:var(--border-thin) solid var(--color-paper);justify-content:center;align-items:center;transition:opacity .15s ease-out,filter 80ms ease-out;display:flex;position:absolute;top:0;bottom:0}.carousel-arrow.carousel-arrow-left{background:linear-gradient(90deg, rgba(var(--rgb-background), 1) 25%, rgba(var(--rgb-background), 0))}.carousel-arrow:before{content:"";background:linear-gradient(transparent 25%, var(--color-link-shadow), transparent 75%);opacity:0;z-index:-1;border-radius:var(--border-radius-small);background-position:50%;background-repeat:no-repeat;background-size:100% 100%,100% 50%;transition:opacity 80ms ease-out;position:absolute;inset:0}.carousel-arrow:hover:before{opacity:1}.carousel-arrow:after{content:"";-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem);z-index:-2;border-radius:var(--border-radius-small);position:absolute;inset:0}.carousel-arrow:hover{filter:none}.carousel-arrow[aria-hidden=true]{opacity:0;pointer-events:none}.carousel-arrow-left{left:0}.carousel-arrow-right{right:0}}.carousel.items .carousel-item{width:15rem}.carousel.items .card{text-align:center;justify-items:center;gap:var(--gutter-small);grid-template-columns:1fr;width:15rem;margin-bottom:0}.carousel.items .card header{justify-content:center}.carousel.items .card header h2{font-size:var(--font-h3)}@media (max-width:30rem){.carousel>div{gap:var(--gutter-small)}.carousel .carousel-item{scroll-snap-align:start;flex:none;width:95%}}
