.lypsum-carousel { max-width: 1100px; margin: 1.5rem auto; }
.lypsum-carousel__viewport { overflow: hidden; cursor: grab; touch-action: pan-y; }
.lypsum-carousel__viewport--dragging { cursor: grabbing; user-select: none; }
.lypsum-carousel__track { display: flex; gap: 1rem; transition: transform .3s ease; will-change: transform; }
.lypsum-carousel__slide { flex: 0 0 calc((100% - 3rem) / 4); min-width: 0; }
.lypsum-carousel__card { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border: 0; border-radius: .5rem; padding: 0; color: #fff; background: #1d2327; cursor: pointer; text-align: left; box-shadow: 0 2px 7px rgba(0, 0, 0, .16); }
.lypsum-carousel__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.lypsum-carousel__card:hover img, .lypsum-carousel__card:focus-visible img { transform: scale(1.05); }
.lypsum-carousel__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.05) 100%); }
.lypsum-carousel__title { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; z-index: 1; font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 700; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.lypsum-carousel__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(0,0,0,.72); box-shadow: 0 2px 8px rgba(0,0,0,.45); transform: translate(-50%, -50%); font-size: 1.15rem; }
.lypsum-carousel__placeholder { display: grid; height: 100%; place-items: center; font-size: 5rem; }
.lypsum-carousel__controls { display: flex; justify-content: center; align-items: center; gap: .75rem; margin-top: 1rem; }
.lypsum-carousel__controls[hidden] { display: none; }
.lypsum-carousel__arrow, .lypsum-carousel__dots button { border: 0; cursor: pointer; }
.lypsum-carousel__arrow { display: grid; width: 25px; height: 25px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #002238; color: #fff; font-size: .75rem; line-height: 1; transition: background-color .2s ease, transform .2s ease; }
.lypsum-carousel__arrow:hover:not(:disabled), .lypsum-carousel__arrow:focus-visible:not(:disabled) { background: #EA5A1A; transform: translateY(-1px); }
.lypsum-carousel__arrow:active:not(:disabled) { background: #EA5A1A; transform: translateY(0); }
.lypsum-carousel__arrow:disabled { opacity: .42; cursor: not-allowed; }
.lypsum-carousel__dots { display: flex; gap: .45rem; }
.lypsum-carousel__dots button { width: .65rem; height: .65rem; padding: 0; border: 1px solid transparent; border-radius: 50%; background: #8c8f94; transition: background-color .2s ease, transform .2s ease; }
.lypsum-carousel__dots button:hover { background: #50575e; transform: scale(1.15); }
.lypsum-carousel__dots button[aria-selected="true"] { background: #135e96; transform: scale(1.2); }
.lypsum-carousel-modal[hidden] { display: none; }
.lypsum-carousel-modal { position: fixed; z-index: 999999; inset: 0; display: grid; place-items: center; padding: 1rem; }
.lypsum-carousel-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.82); }
.lypsum-carousel-modal__dialog { position: relative; width: min(100%, 960px); max-height: 95vh; overflow: auto; padding: 1.25rem; background: #fff; color: #1d2327; }
.lypsum-carousel-modal__close { position: absolute; top: .45rem; right: .6rem; border: 0; background: transparent; cursor: pointer; font-size: 2rem; line-height: 1; }
.lypsum-carousel-modal__dialog h2 { margin: 0 2.5rem 1rem 0; font-size: 1.25rem; }
.lypsum-carousel-modal__media iframe, .lypsum-carousel-modal__media video { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.lypsum-carousel-modal__media audio { width: 100%; }
.lypsum-carousel__card:focus-visible, .lypsum-carousel__arrow:focus-visible, .lypsum-carousel__dots button:focus-visible, .lypsum-carousel-modal__close:focus-visible { outline: 3px solid #2271b1; outline-offset: 3px; }
@media (max-width: 900px) {
	.lypsum-carousel__slide { flex-basis: calc((100% - 1rem) / 2); }
	.lypsum-carousel__title { font-size: clamp(1rem, 2.5vw, 1.3rem); }
}
@media (max-width: 600px) {
	.lypsum-carousel__slide { flex-basis: 100%; }
	.lypsum-carousel__card { aspect-ratio: 4 / 5; }
	.lypsum-carousel__title { right: 1.15rem; bottom: 1.15rem; left: 1.15rem; font-size: 1.2rem; }
}