.plans-carousel {
    position: relative;
    margin-top: 48px;
}

.plans-carousel-viewport {
    overflow: hidden;
    padding: 16px 0;
}

.plans-carousel-track {
    --plans-visible: 4;
    display: flex;
    gap: 24px;
    transition: transform 0.35s ease;
    will-change: transform;
}

.plans-carousel-item {
    flex: 0 0 calc((100% - (24px * (var(--plans-visible) - 1))) / var(--plans-visible));
    min-width: 0;
    display: flex;
}

.plans-carousel-item .card {
    width: 100%;
    height: 100%;
}

.plans-carousel-item .card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plans-carousel-item .card .items {
    flex: 1 1 auto;
}

.plans-carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(30, 31, 31, 0.92);
    color: #fff;
    z-index: 2;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.plans-carousel-control:hover:not(:disabled) {
    background: #00d2d9;
}

.plans-carousel-control:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.plans-carousel-control.-prev {
    left: -24px;
}

.plans-carousel-control.-next {
    right: -24px;
}

@media (max-width: 1199.98px) {
    .plans-carousel-track {
        --plans-visible: 2;
    }

    .plans-carousel-control.-prev {
        left: -12px;
    }

    .plans-carousel-control.-next {
        right: -12px;
    }
}

@media (max-width: 767.98px) {
    .plans-carousel {
        margin-top: 32px;
    }

    .plans-carousel-track {
        --plans-visible: 1;
        gap: 16px;
    }

    .plans-carousel-item {
        flex-basis: 100%;
    }

    .plans-carousel-control {
        top: auto;
        bottom: -56px;
        transform: none;
    }

    .plans-carousel-control.-prev {
        left: calc(50% - 56px);
    }

    .plans-carousel-control.-next {
        right: calc(50% - 56px);
    }
}