/* Hamburger menu styles */
#hamburger-btn {
    display: none;
}

@media only screen and (max-width: 768px) {
    #main-nav {
        display: none;
        /* position: absolute; */
        top: 90px;
        right: 0;
        width: 50%;
        background-color: #07395f;
        z-index: 1000;
        width: auto;
    }
    #current-events {
        display: block !important;
        /* flex-direction: column; */
        padding-left: 10px;
        margin-bottom: 10px;
    } 
    .event{
        /* width: 100%; */
        display: flex;
        flex-direction: column;
        margin-bottom: 50px;
    }

    #main-nav ul {
        display: flex;
        flex-direction: column;
        
    }

    #main-nav ul li {
        margin: 10px;
    }

    #main-nav ul li a {
        color: #000000;
        text-decoration: none;
        padding: 10px;
    }

    #main-nav ul li a:hover {
        color: #07395f;
    }
    #main-nav.active {
        display: block;
    }

    #hamburger-btn {
        display: block;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 2000;
        background-color: transparent;
        border: none;
        color: #55cbd3;
        font-size: 24px;
        cursor: pointer;
        /* margin-top: 40px; */
    }
    #hero img {
        max-width: 100%;
        height: auto;
        margin-top: 20px;
    }

    #spotlights_card {
        padding: 20px;
    }

    .spotlight {
        display: block; 
        padding: 15px;
    }

    .spotlight img {
        margin-right: 0;
        max-width: 100%;
        margin-bottom: 10px;
    }

    .spotlight p {
        font-size: 14px;
    }
}



@media (min-width: 600px) {
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 20px;
    }

    #sidebar {
        grid-column: 1 / span 1;
    }

    #main-content {
        grid-column: 2 / span 1;
    }


    #sidebar p {
        overflow-x: scroll;
        max-height: 25em;
        text-align: center;
    }

    .photos img {
        transition: none !important;
    }
}

/* @media (max-width: 600px) {
    p {
        margin: 15px;
        padding: 10px;
        font-size: 0.9em;
    }
} */

@media (min-width: 768px) {
    .container {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}


@media only screen and (max-width: 768px) {
    #current-events {
        display: block !important;
        /* flex-direction: column; */
        padding-left: 10px;
        margin-bottom: 10px;
    } 
    .event{
        /* width: 100%; */
        display: flex;
        flex-direction: column;
        margin-bottom: 50px;
    }
}