@media screen and (min-width: 701px) {
    .content-404 {
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        margin-left: 2.5rem;
        max-width: 55vw;
    }
}

@media screen and (min-width: 1200px) {
    .content-404 {
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        margin-left: 3rem;
        max-width: 55vw;
    }
}

@media screen and (max-width: 700px) {
    .content-404 {
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        margin-left: 2.5rem;
        max-width: 100vw;
    }
}

@media screen and (min-width: 700px) {
    .bg-404 {
        width: 40vw;
        height: 100vh;
        background: url("../img/hero-bg.webp") left center;
        filter: brightness(.7);
        background-size: cover;
        transform: rotate(0);
        right: 0;
        position: absolute;
    }
}

@media screen and (min-width: 1200px) {
    .bg-404 {
        width: 60vw;
        height: 100vh;
        background: url("../img/hero-bg.webp") left center;
        filter: brightness(.7);
        background-size: cover;
        transform: rotate(0);
        right: 0;
        position: absolute;
    }
}