.gallery-bg {
    padding: 120px 0;
}

.gallery h1 {
    text-align: center;
    margin-bottom: 40px;
}

.gallery-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 20px;
    gap: 40px;
    margin-bottom: 40px;
}

.gallery-menu li {
    position: relative;
    cursor: pointer;
}

.gallery-menu li:hover::after, .gallery-menu li.active-nav::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--cor-c11);
    position: absolute;
}

.all img, .nature img, .urban img, .landscapes img, .architecture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.all, .nature, .urban, .landscapes, .architecture {
    display: none;
    padding: 0 20px;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    grid-template-areas: 
    "all-4 all-6 all-2"
    "all-1 all-6 all-5"
    "all-1 all-3 all-5"
    "all-1 all-3 all-5";
}

.all.active, .nature.active, .urban.active, .landscapes.active, .architecture.active {
    display: grid;
}

[data-gallery] div {
    animation: show .5s forwards;
}

@keyframes show {
    from {
        opacity: 0;
        transform: translate3d(0,-40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.all-1 {
    grid-area: all-1;
}

.all-2 {
    grid-area: all-2;
}

.all-3 {
    grid-area: all-3;
}

.all-4 {
    grid-area: all-4;
}

.all-5 {
    grid-area: all-5;
}

.all-6 {
    grid-area: all-6;
}

@media(max-width:750px) {
    .gallery-bg {
        padding: 80px 0;
    }

    .gallery h1 {
        margin-bottom: 24px;
    }

    .all,.nature, .urban, .landscapes, .architecture {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        "all-6 all-5"
        "all-6 all-5"
        "all-4 all-5"
        "all-1 all-2"
        "all-1 all-3"
        "all-1 all-3";
    }

    .gallery-menu {
        gap: 36px;
        margin-bottom: 36px;
    }

    [data-gallery] div {
        animation: showRight .3s forwards;
    }

    @keyframes showRight {
        from {
            opacity: 0;
            transform: translate3d(-30px,0, 0);
        }
    
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}


@media(max-width: 520px) {
    .all,.nature, .urban, .landscapes, .architecture {
        grid-template-columns: 1fr ;
        grid-template-areas: 
        "all-6"
        "all-5"
        "all-4"
        "all-2"
        "all-1"
        "all-3";
    }

    .gallery-menu {
        gap: 24px;
        margin-bottom: 32px;
    }
}