.activities>.headline {
    grid-area: 1/5/span 1/span 6;
}

.activities:has(>.icon-container)>.headline {
    margin-top: var(--m-sm);
}

.activities>.btns-container {
    grid-area: 2/5/span 2/span 6;
    border: 1px solid currentColor;
    border-radius: 100vmin;
    padding: max(6px, 0.703125vw);
    height: fit-content;
}

.activities>.icon-left {
    grid-area: 1/3/span 3/span 2;
    transform: translateY(calc(var(--m-sm) - 6px));
}

.activities>.icon-right {
    grid-area: 1/11/span 3/span 2;
    transform: translateY(calc(var(--m-sm) - 6px));
}

.activities>.highlight {
    grid-area: 2/11/span 1/span 2;
    transform: rotate(-10deg);

}

.activities .activities-container {
    grid-column: 3/span 10;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: var(--m-md);
    margin-left: calc(var(--m-sm) * -1);
    margin-right: calc(var(--m-sm) * -1);
}

.activities .activities-container .activity-item {
    padding: var(--m-sm);
}

.activities .activities-container .activity-item>* {
    grid-area: 1/1/span 1/span 1;
}

.activities .activities-container .activity-item .activity-preview {
    cursor: pointer;
}

.activities .activities-container .activity-item .activity-content {
    opacity: 0;
    visibility: hidden;
    transition: var(--def-trans);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.activities .activities-container .activity-item .activity-content .activity-text {
    overflow: auto;
    height: auto;
    flex-grow: 0;
    flex-shrink: 1;
}

.activities .activities-container .activity-item .activity-content .activity-text p:last-of-type {
    margin-bottom: var(--m-xs);
}

.activities .activities-container .activity-item .activity-content .activity-text::after {
    content: "";
    display: block;
    position: sticky;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--m-xs);
    background: linear-gradient(0deg, var(--white) 0%, transparent 100%);
}

.activities .activities-container .activity-item.active .activity-content {
    opacity: 1;
    visibility: visible;
    transition: var(--def-trans);
}

.activities .activities-container .activity-item .activity-content .activity-thumb {
    max-width: max(96px, 6.640625vw);
    justify-self: center;
}

.activities .activities-container .activity-item .activity-content .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--m-xs);
    aspect-ratio: 1/1;
    mask: url(../../img/icon-close.svg) no-repeat center/contain;
    -webkit-mask: url(../../img/icon-close.svg) no-repeat center/contain;
    background: black;
}

@media (max-width: 1499.98px) {
    .activities .activities-container {
        grid-column: 2/span 12;
        margin-left: 0;
        margin-right: 0;
    }

    .activities>.icon-left {
        grid-area: 1/2/span 3/span 2;
        margin-left: var(--m-sm);
    }

    .activities>.icon-right {
        grid-area: 1/12/span 3/span 2;
        margin-right: var(--m-sm);
    }

    .activities>.highlight {
        grid-area: 2/11/span 1/span 3;
    }
}

@media (min-width: 1200px) {
    .activities .activities-container .activity-item:not(:nth-child(3n)) {
        border-right: 1px solid currentColor;
    }
}

@media (max-width: 1199.98px) {
    .activities>.headline {
        grid-area: 1/5/span 1/span 6;
    }

    .activities>.btns-container {
        grid-area: 2/5/span 2/span 6;
    }

    .activities>.icon-left {
        grid-area: 1/2/span 3/span 3;
    }

    .activities>.icon-right {
        grid-area: 1/11/span 3/span 3;
    }

    .activities>.highlight {
        grid-area: 2/10/span 1/span 4;
        width: fit-content;
        justify-self: center;
    }

    .activities .activities-container {
        grid-column: 2/span 12;
        grid-template-columns: repeat(2, 1fr);
        margin-left: 0;
        margin-right: 0;
    }

    .activities .activities-container .activity-item:nth-child(2n-1) {
        border-right: 1px solid currentColor;
    }
}

@media (max-width: 767.98px) {
    .activities>.btns-container {
        grid-area: 2/2/span 1/span 12;
        margin-bottom: var(--m-sm);
    }

    .activities>.icon-left {
        grid-area: 3/3/span 1/span 10;
        justify-self: flex-start;
        max-width: 168px;
    }

    .activities>.icon-right {
        grid-area: 3/3/span 1/span 10;
        justify-self: flex-end;
        max-width: 168px;
    }

    .activities>.highlight {
        grid-area: 3/8/span 1/span 5;
        justify-self: flex-end;
        align-self: center;
        margin-right: var(--m-sm);
    }

    .activities .activities-container {
        grid-column: 3/span 10;
        grid-template-columns: 1fr;
        grid-row-gap: var(--m-sm);
    }

    .activities .activities-container .activity-item:nth-child(2n-1) {
        border-right: 0;
    }
}

@media (max-width: 575.98px) {
    .activities>.highlight {
        grid-area: 3/2/span 1/span 12;
        justify-self: center;
        text-align: center;
        margin-right: 0;
        margin-bottom: var(--m-sm);
        margin-top: var(--m-xs);
    }

    .activities>.icon-left {
        grid-area: 4/1/span 1/span 14;
    }

    .activities>.icon-right {
        grid-area: 4/1/span 1/span 14;
        justify-self: flex-end;
        max-width: 168px;
    }

    .activities .activities-container {
        grid-column: 1/span 14;
        margin-left: 0;
        margin-right: 0;
    }

    .activities .activities-container .activity-item {
        padding: var(--m-xs);
    }
}