@media (min-width: 769px) {
    .br-sm {display: none;}
    .br-md {display: none;}
    .br-lg {display: inline;}

    .hide-sm {display:block;}

    .container {
        grid-template-columns: 1fr 1fr;
    }

    .project--two .project__descr,
    .project--six .project__descr {order: 1}
    .project--two .project__cover,
    .project--six .project__cover {order: 2}

    .project--three .project__descr,
    .project--four .project__descr,
    .project--seven .project__descr,
    .project--eight .project__descr {order: 2;}
    .project--three .project__cover,
    .project--four .project__cover,
    .project--seven .project__cover,
    .project--eight .project__cover {order: 1;}


}

@media (min-width: 1045px) {

}

@media (min-width: 1200px) {
    .br-lg {display: none;}

    .logo {left: 15%;}

    .nav {right: 13.5%;}

    .intro {
        width: 69vw;
        margin: 0 auto;
        padding-top: 20vh;
    }

    .hero {
        width: 69vw;
    }

    .first {
        padding: 20vh 0 3vh 0;
    }

    .container {
        width: 72vw;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 10px;
        place-items: stretch;
        grid-template-rows: repeat(4, 2fr);
    }
    
    .project__descr {
        margin: 1vw 1.7vw;
    }

    .project__descr p {
        font-family: var(--fontL);
    }

    .hero {
        row-gap: 20px;
    }

    .hero h1 {
        margin: 0 0 1vh 0;
    }

    .hero h2 {
        font-family: var(--fontL);
    }

    .hero h1,
    .project__details p:nth-child(odd),
    .project__videos--details p {
        width: 35%;
    }

    .hero h2,
    .project__details p:nth-child(even) {
        width: 65%;
    }

    .list--small {
        width: 25%;
    }

    .list--large {
        width: 60%;
    }

    .project__details,
    .project__videos--details {
        width: 69vw;
        margin: 0 auto;
        row-gap: 20px;
        padding: 5vh 0 5vh 0;
    }

    .project__headline {
        width: 69vw;
        margin: 0 auto;
        row-gap: 20px;
        padding: 5vh 0 0 0;
    }

    .project__images-50 {width: calc(50% - (20px / 2));}
    .project__images-33 {width: calc(33.33% - ((20px * 2) / 3));}
    .project__images-25 {width: calc(25% - ((20px * 3) / 4))}
    .project__images-20 {width: 8%}
    .project__images-12 {width: calc(12.5% - (4 * 20px))}

    .project__next {
        width: 69vw;
    }

    .footer {
        width: 72vw;
    }
}

@media (min-width: 1700px) {
    .project__skills {
        display: block;
    }
}

@media (min-width: 1820px) {
    .br-lg {display: inline;}
}