header {
    padding: clamp(7rem, 10vw, 10rem) 5%;

    .gallery-hero {
        position: relative;
        width: 100%;
        /* height: 100vh; */

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .text {
            position: absolute;
            bottom: clamp(1rem, 3vw, 2rem);
            left: clamp(1rem, 3vw, 2rem);

            .title {
                color: white;
            }

            .subline {
                font-size: clamp(1rem, 2vw, 1.5rem);
                color: white;
                opacity: .9;
            }
        }
    }
}

main {
    width: 100%;
    padding: 2rem 5%;
}

.imgs {
    width: 100%;
    margin-bottom: clamp(3rem, 10vw, 10rem);
    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    
    .img {
        position: relative;
        background-color: var(--secondary);
        border-radius: 6px;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .7;
            transition: .3s;
        }
    }

    .img:hover {
        img {
            scale: 1.2;
            opacity: 1;
        }
    }

    .label {
        position: absolute;
        bottom: 1rem;
        left: 1rem;

        font-size: clamp(1.5rem, 3vw, 2rem);
        color: white;
        font-weight: var(--weight-md);
    }
}

@media (max-width: 767px) {
    header {
        padding: 6rem 5% 0rem 5%;
    }
}