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

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

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

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

.oak-card-carousel .swiper-wrapper {
    height: auto;
}

.oak-card-carousel-slide {
    border-radius: var(--oak-radius-l);
    background-color: var(--oak-white);
    text-decoration: none;
    color: var(--oak-black);
    padding: var(--oak-spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--oak-spacing-s);
    aspect-ratio: 1;
    height: auto;
}

.oak-card-carousel-slide-title {
    margin-bottom: var(--oak-spacing-s);
}

.oak-card-carousel-slide-subtitle {
    color: var(--oak-olive-800);
}

.oak-card-carousel-slide .oak-icon-arrow-xl {
    margin-top: auto;
    stroke: var(--oak-green-500);
}

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

.oak-card-carousel-prev,
.oak-card-carousel-next {
    position: absolute;
    top: 0;
    z-index: 1;
}

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

.oak-card-carousel-prev {
    left: -100px;
}

.oak-card-carousel-next {
    right: -100px;
}

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

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

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

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

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

    .oak-card-carousel-prev {
        left: -90px;
    }

    .oak-card-carousel-next {
        right: -90px;
    }
}

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

    .oak-card-carousel-prev {
        left: -70px;
    }

    .oak-card-carousel-next {
        right: -70px;
    }
}

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

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

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

@media (max-width: 768px) {
    .oak-card-carousel {
        padding: 0;
        padding-bottom: var(--oak-spacing-s);
    }

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

    .oak-card-carousel-prev,
    .oak-card-carousel-next {
        top: 100% !important;
        transform: translateY(calc(-50% - 10px));
    }

    .oak-card-carousel-prev {
        left: 0;
    }

    .oak-card-carousel-next {
        right: 0;
    }
}

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

    .oak-card-carousel-slide {
        padding: var(--oak-spacing-l) var(--oak-spacing-s);
    }
}