/* =========================================================
   CONTAINER
========================================================= */

.gallery-container {
    width:
        min(
            calc(100% - 80px),
            1280px
        );
    margin: 0 auto;
}


/* =========================================================
   ACTIVITIES SECTION
========================================================= */

.activities-section {
    padding:130px 0;
    background:var(--background);
}

.activities-heading {
    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:end;
    gap:70px;
    margin-bottom:60px;
}

.section-eyebrow {
    display:block;
    margin-bottom:20px;
    color:var(--purple-primary);
    font-size:var(--font-12);
    font-weight:var(--weight-700);
    letter-spacing:2.5px;
}


.activities-heading h2 {
    font-size:
        clamp(
            var(--font-48),
            5vw,
            var(--font-64)
        );

    line-height:1;
    letter-spacing:-3px;
    font-weight:var(--weight-500);
}


.activities-heading h2 em {
    color:var(--purple-primary);
    font-style:normal;
}


.activities-heading > p {
    max-width:420px;
    color:var(--muted);
    font-size:var(--font-14);
    line-height:1.9;
}


/* =========================================================
   ACTIVITY GRID
========================================================= */

.activity-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-auto-rows:370px;
    gap:18px;
}


.activity-card {
    position:relative;
    overflow:hidden;
    /* border-radius:12px; */
    color:white;
    background:var(--purple-dark);
    isolation:isolate;
}


.activity-card.activity-large {

    grid-row:
        span 2;
}


/* =========================================================
   ACTIVITY IMAGE
========================================================= */

.activity-image {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;
}


.activity-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        1s
        cubic-bezier(.22,1,.36,1);
}


.activity-card:hover
.activity-image img {

    transform:
        scale(1.08);
}


/* =========================================================
   OVERLAY
========================================================= */

.activity-overlay {

    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            180deg,
            rgba(61,0,117,.05) 15%,
            rgba(61,0,117,.25) 40%,
            rgba(20,0,40,.92) 100%
        );
    transition:.5s ease;
}


.activity-card:hover
.activity-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(61,0,117,.10),
            rgba(60,10,109,.94)
        );
}


/* =========================================================
   ACTIVITY CONTENT
========================================================= */

.activity-content {
    position:absolute;
    inset:auto 0 0 0;
    z-index:2;
    padding:30px;
    display:grid;
    grid-template-columns:34px 1fr;
    gap:6px;
    align-items:end;
}


.activity-number {
    align-self:start;
    font-size:var(--font-16);
    color:#FFFFFF;
    font-weight:var(--weight-500);
}


.activity-category {
    display:block;
    margin-bottom:7px;
    color:var(--purple-light);
    font-size:var(--font-12);
    font-weight:var(--weight-400);
    letter-spacing:1.5px;
}


.activity-content h3 {
    font-size:var(--font-20);
    line-height:1.2;
    font-weight:var(--weight-500);
    letter-spacing:-.25px;
}

.activity-content p {
    max-width:430px;
    margin-top:9px;
    color:rgba(255,255,255,.65);
    font-size:var(--font-14);
    line-height:1.65;
}


/* =========================================================
   ARROW
========================================================= */

.activity-arrow {
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
    color:#eae4ef;
}


.activity-card:hover
.activity-arrow {
    background:#eae4ef;
    color:#5a199b;
    transform:rotate(45deg);
}


/* =========================================================
   FOOTER
========================================================= */

.gallery-footer {

    padding:
        70px 0 25px;

    background:
        #18002f;

    color:
        white;
}


.footer-content {

    padding-bottom:
        55px;

    border-bottom:
        1px solid
        rgba(255,255,255,.1);
}


.footer-content img {

    width:
        155px;

    margin-bottom:
        20px;
}


.footer-content p {

    font-size:
        var(--font-12);

    font-weight:
        var(--weight-500);
}


.footer-content span {

    display:
        block;

    margin-top:
        5px;

    color:
        rgba(255,255,255,.4);

    font-size:
        var(--font-12);
}


.footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    padding-top:
        22px;

    color:
        rgba(255,255,255,.35);

    font-size:
        var(--font-12);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .activity-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .activity-card.activity-large {

        grid-row:
            span 1;
    }


    .activities-heading {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 750px) {

    .gallery-container,
    .gallery-header-inner {

        width:
            calc(100% - 40px);
    }


    .gallery-nav {

        display:
            none;
    }


    .gallery-hero {

        min-height:
            520px;
    }


    .gallery-hero h1 {

        font-size:
            var(--font-48);
    }


    .activity-grid {

        grid-template-columns:
            1fr;

        grid-auto-rows:
            390px;
    }


    .footer-bottom {

        flex-direction:
            column;

        gap:
            10px;
    }

}


@media (max-width: 500px) {

    .gallery-header {

        padding:
            18px 0;
    }


    .gallery-logo img {

        width:
            140px;
    }


    .header-button {

        padding:
            10px 14px;

        font-size:
            var(--font-12);
    }


    .activities-section {

        padding:
            90px 0;
    }


    .activities-heading h2 {

        font-size:
            var(--font-40);

        letter-spacing:
            -2px;
    }


    .activity-grid {

        grid-auto-rows:
            350px;
    }


    .activity-content {

        padding:
            24px;

        grid-template-columns:
            30px 1fr 38px;
    }


    .activity-content h3 {

        font-size:
            var(--font-20);
    }


    .activity-arrow {

        width:
            38px;

        height:
            38px;
    }

}