/* =====================================================
   EVENTS PAGE
===================================================== */

.page-hero {

    padding:
        51px 0;

    color:
        white;

    background:
        var(--primary);

}


.page-hero h1 {

    margin-top:
        7px;

    font-size:
        clamp(40px, 6vw, 60px);

}


.page-hero p {

    margin-top:
        8px;

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

}


/* =====================================================
   EVENTS GRID
===================================================== */

.events-grid {

    display: grid;

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

    gap:
        20px;

    justify-content:
        center;

}


/* =====================================================
   EVENT CARD
===================================================== */

.event-card {

    overflow:
        hidden;
    
    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        white;

}


/* =====================================================
   EVENT IMAGE
===================================================== */

.event-card img {

    width:
        100%;

    height:
        220px;

    object-fit:
        cover;

}


/* =====================================================
   EVENT CONTENT
===================================================== */

.event-content {

    padding:
        22px;

}


.event-content > span {

    color:
        var(--accent);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1px;

}


.event-content h3 {

    margin:
        6px 0;

    font-size:
        21px;

}


.event-content p {

    color:
        var(--muted);

    font-size:
        13px;

}


/* =====================================================
   SINGLE EVENT → CENTER
===================================================== */

.events-grid .event-card:only-child {

    grid-column:
        2;

}


/* =====================================================
   TWO EVENTS
===================================================== */

@media(min-width:651px) and (max-width:1000px) {

    .events-grid {

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

    }

    .events-grid .event-card:only-child {

        grid-column:
            1 / -1;

        justify-self:
            center;

        width:
            calc(50% - 10px);

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px) {

    .events-grid {

        grid-template-columns:
            1fr;

    }

    .events-grid .event-card:only-child {

        grid-column:
            auto;

        width:
            100%;

    }

}