/* === Navbar === */
@media(max-width: 1000px) {
    .nav__container {
        align-items: center;
        justify-content: space-between;
    }

    .nav__menu {
        display: block;
        width: 35px;
        height: 35px;
        position: relative;
        border: 1px solid #1b1c1d;
    }

    .nav__menu:after {
        content: '';
        position: absolute;
        top: 30%;
        left: 15%;
        width: 70%;
        height: 5%;
        border-radius: 20px;
        background-color: black;
        transition: 0.5s ease;
    }

    .nav__menu:before {
        content: '';
        position: absolute;
        top: 60%;
        left: 40%;
        width: 45%;
        height: 5%;
        border-radius: 20px;
        background-color: black;
        transition: 0.5s ease;
    }

    #nav__check:checked ~ label .nav__menu:after {
        transform: rotate(225deg);
        top: 45%;
        left: 15%;
    }

    #nav__check:checked ~ label .nav__menu:before {
        transform: rotate(-225deg);
        width: 70%;
        top: 45%;
        left: 15%;
    }

    .nav__list {
        display: none;  
        flex: 100%;
    }

    #nav__check:checked ~ .nav__list {
        display: block;
    }

    .nav__item {
        margin: 0;
    }

    .nav__item--icon {
        display: inline-block;
        margin: 0.938em 1.25em 0 0;
    }
}

/* === Home === */
@media(max-width: 1000px) {
    .home__container {
        height: 250vh;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    } 
}

@media(max-width: 600px) {
    .home__container {
        grid-template-columns: repeat(1, 1fr);        
    }

    .home__bg--1 {
        grid-column: 1/1;
        grid-row: 1/4;
    }    
}

/* === Related === */
@media(max-width: 1200px) {
    .related__container {
        grid-gap: 3.75em;
    }    
}


/* === Footer === */
@media(max-width: 900px) {
    .footer__container {
        grid-template-columns: repeat(1, 1fr);
    }

    .footer__btn {
        left: 186px;
    }
}

@media(max-width: 400px) {
    .footer__email {
        width: 100%;
    }

    .footer__btn {
        left: 0;
        top: 60px;  
        margin: 0 auto;
        width: 150px;
    }
    .footer__copy {
        font-size: 0.75rem;
    }
}