.section-carousel .section-header {
    text-align: center;
}

.carousel-wrapper {
    position: relative;
}

.carousel-slide {
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 4/3;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: calc(var(--item-gap) * 1.5);
    height: calc(var(--item-gap) * 1.5);
    border-radius: 50%;
    border: 2px solid var(--medium);
    background: var(--white);
    color: var(--medium);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--text-base);
    box-shadow: var(--shadow-md);
    transition: background var(--trans-fast), color var(--trans-fast), border-color var(--trans-fast);

    &:hover {
        background: var(--medium);
        color: var(--white);
        border-color: var(--medium);
    }

    &:focus-visible {
        outline: var(--focus-ring);
        outline-offset: 2px;
    }
}

.carousel-btn-prev {
    left: calc(var(--item-gap) * -.7);
}

.carousel-btn-next {
    right: calc(var(--item-gap) * -.7);
}