.block-editor-block-list__layout .activity-item {
    max-width: 752px !important;
}

.activity-item {
    display: grid;
    cursor: pointer;
}

.activity-item .badge {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%) rotate(-10deg);
    z-index: 3;
}

.activity-item .details-btn {
    position: absolute;
    top: var(--m-sm);
    right: var(--m-sm);
    z-index: 1;
}

body:not(.is-mobile) .activity-item .details-btn .hover-text {
    opacity: 0;
    transition: var(--def-trans);
}

body:not(.is-mobile) .activity-item:hover .details-btn .hover-text {
    opacity: 1;
}

.activity-item .activity-img-wrapper {
    grid-area: 1/1/1/1;
}

.activity-item .activity-img {
    aspect-ratio: 752/994;
    overflow: hidden;
}

body:not(.is-mobile) .activity-item .activity-img img {
    transform: scale(1);
    transition: var(--def-trans);
}

body:not(.is-mobile) .activity-item:hover .activity-img img {
    transform: scale(1.05);
}

.activity-item .activity-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;
}

.activity-item.active .activity-content {
    opacity: 1;
    visibility: visible;
    cursor: default;
}

.activity-item .activity-content>* {
    flex: 0 0 auto;
}

.activity-item .activity-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);
}

.activity-item .activity-content .close-btn:hover {
    transform: scale(1.1);
}

.activity-item .activity-content .activity-thumb {
    width: 20%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    overflow: hidden;
}

.activity-item .activity-content .text-container {
    margin-bottom: auto;
    overflow-x: auto;
    flex-shrink: 1;
    flex-grow: 0;
    position: relative;
}

.activity-item .activity-content .text-container::after {
    content: "";
    display: block;
    width: 100%;
    height: 2em;
    position: sticky;
    left: 0;
    bottom: 0;
}

.activity-item .activity-content.bg-green .text-container::after {
    background: linear-gradient(0deg, var(--green) 0%, transparent 100%);
}

.activity-item .activity-content.bg-blue .text-container::after {
    background: linear-gradient(0deg, var(--blue) 0%, transparent 100%);
}

.activity-item .activity-content .destinations-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .35em;
    margin-top: 2em;
    text-wrap: balance;
}

.activity-item .activity-content .destinations-container .destination-distance {
    white-space: nowrap;
}

@media (max-width: 1499.98px) {
    .activity-item .badge {
        top: unset;
        bottom: var(--grid-gap);
        left: var(--grid-gap);
        transform: rotate(-10deg);
        transition: opacity .3s ease;
    }


    .activity-item.active .badge {
        opacity: 0;
    }
}

@media (max-width: 575.98px) {
    .activity-item .activity-content .destinations-container {
        gap: .25em;
        line-height: 1.25;
        letter-spacing: .04em;
    }

    .activity-item .activity-content .text-container,
    .activity-item .activity-content .text-container p {
        line-height: 1.4;
    }

    .activity-item .activity-img,
    .activity-item .activity-content {
        aspect-ratio: 2/3;
    }
}