/* Gallery Cards — change size here (keep both; aspect ratio follows them). */
.tsc-section-gallery-cards {
    --gallery-cards-width: 600px;
    --gallery-cards-height: 500px;
    --gallery-cards-arrow-size: 36px;
    --gallery-cards-gap: 16px;
    padding: 40px 16px;
}

.tsc-section-gallery-cards .gallery-cards-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gallery-cards-gap);
    width: 100%;
}

.tsc-section-gallery-cards .carousel-track {
    position: relative;
    flex: 0 1 var(--gallery-cards-width);
    width: var(--gallery-cards-width);
    max-width: calc(100% - (var(--gallery-cards-arrow-size) * 2) - (var(--gallery-cards-gap) * 2));
    aspect-ratio: var(--gallery-cards-width) / var(--gallery-cards-height);
    height: auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 16px;
}

/* Slides fill the track box; they must not contribute their own height. */
.tsc-section-gallery-cards .carousel-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0.7s ease;
    height: 600px;
}

.tsc-section-gallery-cards .carousel-slide.is-active {
    position: relative;
    width: 100%;
    aspect-ratio: var(--gallery-cards-width) / var(--gallery-cards-height);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
}

/* Absolute so intrinsic portrait/landscape size cannot stretch the slide. */
.tsc-section-gallery-cards .carousel-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.tsc-section-gallery-cards .carousel-arrow {
    flex-shrink: 0;
}

.tsc-section-gallery-cards .carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 20px;
}

.tsc-section-gallery-cards:not(:has(.carousel-prev)) .carousel-track {
    max-width: min(var(--gallery-cards-width), 100%);
}