@media (min-width: 640px) {

    header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #menu {
        display: none;
    }

    nav ul {
        display: flex;
    }

    nav a:hover {
        box-shadow: 0 2px 0 0 var(--tertiary);
    }

    .navigation li {
        flex: 1 1 100%;
        display: block;
    }
    
    #templesList {
        grid-template-columns: 1fr 1fr;
        column-gap: .5rem;
    }

    #templesList img {
        width: 250px;
        height: auto;
    }

    .temple-card ul {
        font-size: .7rem;
    }

    h1 {
        grid-column: 1 / 3;
    }
}

@media (min-width: 1024px) {
    #templesList {
        grid-template-columns: 1fr 1fr 1fr;
    }

    h1 {
        grid-column: 1 / 4;
    }
}