.oak-row:has(.oak-carousel) {
    overflow: visible;
}

.oak-carousel {
    width: 100%;
    padding: var(--oak-spacing-m) var(--oak-spacing-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--oak-spacing-xl);
}

.oak-carousel-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--oak-spacing-xl);
    container: swiper / inline-size;
}

.oak-carousel-swiper {
    width: 100%;
    border-radius: var(--oak-radius-l);
}

.oak-carousel-slide {
    border-radius: var(--oak-radius-l);
    overflow: hidden;
    background-color: var(--oak-white);
    /*height: fit-content;*/ /* https://app.clickup.com/t/869b82czg */
}

.oak-carousel-slide-detail {
    display: -webkit-box;
    /* max-width: 200px; */
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.oak-carousel-slide-image {
    background-size: cover;
    background-position: center;
}

.oak-carousel-m .oak-carousel-slide-image {
    aspect-ratio: 1;
}

.oak-carousel-l .oak-carousel-slide-image {
    aspect-ratio: 4 / 3;
}

.oak-carousel-slide-content {
    padding: var(--oak-spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--oak-spacing-m);
}

.oak-carousel-page {
    display: flex;
    justify-content: center;
}

.oak-carousel-prev,
.oak-carousel-next {
    position: absolute;
    top: 0;
    z-index: 1;
    transition: opacity var(--oak-duration-m) var(--oak-ease);
}

.oak-carousel-prev.swiper-button-disabled,
.oak-carousel-next.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.oak-carousel-prev {
    left: -60px;
}

.oak-carousel-next {
    right: -60px;
}

.oak-carousel-next .oak-icon-arrow {
    transform: rotate(180deg);
}

@container swiper (width > 0) {
    .oak-carousel-m .oak-carousel-prev,
    .oak-carousel-m .oak-carousel-next {
        top: calc(100cqi / 6 - var(--oak-spacing-xl) / 3 - 60px);
    }

    .oak-carousel-l .oak-carousel-prev,
    .oak-carousel-l .oak-carousel-next {
        top: calc((3 * (100cqi - var(--oak-spacing-xl))) / 16 - 60px);
    }

    @media (max-width: 1440px) {
        .oak-carousel-prev,
        .oak-carousel-next {
            top: calc(100cqi / 4 - var(--oak-spacing-xl) / 4 - 50px) !important;
        }
    }

    @media (max-width: 1024px) {
        .oak-carousel-prev,
        .oak-carousel-next {
            top: calc(100cqi / 4 - var(--oak-spacing-xl) / 4 - 40px) !important;
        }
    }

    @media (max-width: 768px) {
        .oak-carousel-prev,
        .oak-carousel-next {
            top: calc(100cqi / 2 - 40px) !important;
        }
    }

    @media (max-width: 512px) {
        .oak-carousel-prev,
        .oak-carousel-next {
            top: calc(100cqi / 2 - 30px) !important;
        }
    }
}

@media (max-width: 1920px) {
    .oak-carousel {
        padding: var(--oak-spacing-m) var(--oak-spacing-xl);
    }
}

@media (max-width: 1440px) {
    .oak-carousel {
        padding: var(--oak-spacing-m);
    }

    .oak-carousel-slide-image {
        aspect-ratio: 1 !important;
    }

    .oak-carousel-prev {
        left: -50px;
    }

    .oak-carousel-next {
        right: -50px;
    }
}

@media (max-width: 1024px) {
    .oak-carousel {
        padding: var(--oak-spacing-m) 0;
    }

    .oak-carousel-prev {
        left: -40px;
    }

    .oak-carousel-next {
        right: -40px;
    }
}

@media (max-width: 768px) {
    .oak-carousel {
        padding: 0;
    }

    .oak-carousel-slide-content {
        padding: var(--oak-spacing-xl) var(--oak-spacing-m);
    }

    .oak-carousel-prev {
        left: var(--oak-spacing-m);
    }

    .oak-carousel-next {
        right: var(--oak-spacing-m);
    }
}

@media (max-width: 512px) {
    .oak-carousel-slide-content {
        padding: var(--oak-spacing-l) var(--oak-spacing-s);
    }

    .oak-carousel-prev {
        left: 20px;
    }

    .oak-carousel-next {
        right: 20px;
    }
}