.header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../public/hero.jpg");
    background-size: cover;
    height: 80vh;
}

.header-image {
    margin-right: -0.5em;
    height: 30vw;
    min-height: 10%;

}

@media (min-width: 768px) {

    .header {
        height: 60vh;
    }

    .header-image {
        margin: 0;
    margin-right: -1.5em;
        height: 25vw;
    }
}

@media (min-width: 1366px) {
    .header {
        height: 85vh;
    }
}