.packages .headline {
    grid-area: 1/2/1/span 12;
}

.packages .text-container {
    grid-area: 2/2/2/span 12;
    max-width: 96ch;
}

.packages .packages-container {
    grid-area: 3/2/3/span 12;
    width: 100%;
    max-width: max(2110px, 82.421875vw);
}

.packages .packages-container .card-item {
    display: grid;
    cursor: pointer;
}

.packages .packages-container .card-item .details-btn {
    position: absolute;
    top: var(--m-sm);
    right: var(--m-sm);
    z-index: 1;
}

body:not(.is-mobile) .packages .packages-container .card-item .details-btn .hover-text {
    opacity: 0;
    transition: var(--def-trans);
}

body:not(.is-mobile) .packages .packages-container .card-item:hover .details-btn .hover-text {
    opacity: 1;
}

.packages .packages-container .card-item .card-img-wrapper {
    grid-area: 1/1/1/1;
}

.packages .packages-container .card-item .card-img {
    aspect-ratio: 752/994;
    overflow: hidden;
}

body:not(.is-mobile) .packages .packages-container .card-item .card-img img {
    transform: scale(1);
    transition: var(--def-trans);
}

body:not(.is-mobile) .packages .packages-container .card-item:hover .card-img img {
    transform: scale(1.05);
}

.packages .packages-container .card-item .card-content{
    grid-area: 1/1/1/1;
    opacity: 0;
    visibility: hidden;
    padding: max(16px, 2.5vw);
    width: 100%;
    height: auto;
    overflow: auto;
    max-height: 100%;
    aspect-ratio: 752/994;
    transition: var(--def-trans);
    z-index: 2;
}

.packages .packages-container .card-item.active .card-content{
    opacity: 1;
    visibility: visible;
    cursor: default;
}

.packages .packages-container .card-item .package-content>* {
    flex: 0 0 auto;
}

.packages .packages-container .card-item .card-content .close-btn {
    display: block;
    width: 24px;
    height: 24px;
    mask: url(../../img/icon-close.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/icon-close.svg) no-repeat center/contain;
    background: var(--white);
    transition: var(--def-trans);
    position: absolute;
    top: max(24px, 1.875vw);
    right: max(24px, 1.875vw);
}

.packages .packages-container .card-item .card-content .close-btn:hover {
    transform: scale(1.1);
}

.packages .packages-container .card-item .card-content .card-thumb {
    width: 20%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    overflow: hidden;
}

.packages .packages-container .card-item .card-content .text-container {
    margin-bottom: auto;
    overflow-x: auto;
    flex-shrink: 1;
    flex-grow: 0;
    position: relative;
}

.packages .packages-container .card-item .card-content .text-container::after {
    content: "";
    display: block;
    width: 100%;
    height: 2em;
    position: sticky;
    left: 0;
    bottom: 0;
}

.packages .packages-container .card-item .package-content.bg-green .text-container::after {
    background: linear-gradient(0deg, var(--green) 0%, transparent 100%);
}

.packages .packages-container .card-item .package-content.bg-blue .text-container::after {
    background: linear-gradient(0deg, var(--blue) 0%, transparent 100%);
}

.packages .packages-container .card-item .package-price {
    margin-top: .5em;
}

.packages .default-slider-nav {
    grid-area: 4/2/4/span 12;
}

@media (max-width: 1499.98px) {
    .packages .card-item .badge {
        top: unset;
        bottom: var(--grid-gap);
        left: var(--grid-gap);
        transform: rotate(-10deg);
        transition: opacity .3s ease;
    }


    .packages .card-item.active .badge {
        opacity: 0;
    }
}

@media (max-width: 575.98px) {
    .packages .card-item .activity-content .destinations-container {
        gap: .25em;
        line-height: 1.25;
        letter-spacing: .04em;
    }

    .packages .card-item .activity-content .text-container,
    .packages .card-item .activity-content .text-container p {
        line-height: 1.4;
    }

    .packages .card-item .activity-img,
    .packages .card-item .activity-content {
        aspect-ratio: 2/3;
    }
}