html, body {margin: 0; padding: 0;}

.main-container {height: 100vh; width: 100vw; position: relative;}
.gray-bg {position: absolute; width: 100%; height: 58%; top: 0; left: 0; background: #dee2e6; z-index: 0;}
.content {padding-left: 5vw; padding-right: 5vw; position: relative; z-index: 1; height: 58%;}
.main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    z-index: 2;

    left: 5vw;
    right: 5vw;
    bottom: -5.5vw;
}
.logo {width: 6.456vw; height: auto; padding-top: 2.21vw;}
.logo img {width: 100%;}
.line-1 {font-size: 3vw; color: #6c757d; font-family: 'Host Grotesk'; font-weight: 500; line-height: 1em;}
.line-1 .bold {font-weight: bold;}
.line-2 {font-size: 6vw; color: #c9333e; font-family: 'Host Grotesk'; font-weight: bold; line-height: 1.2em;}
.line-3 {font-size: 3.2vw; color: #FFF; font-family: 'Plus Jakarta Sans'; background-color: #333533; line-height: 1em; padding: 0.5vw 1.5vw 1vw 1.5vw; display: inline-block; font-weight: bold; font-style: italic;}
.under-construction {width: 35vw;}
.under-construction img {width: 100%;}

@media (max-width: 600px){
    .content {padding-left: 10vw; padding-right: 10vw; height: 50%;}
    .main {flex-direction: column; text-align: center; bottom: -40vw;}
    .left {margin-bottom: 5vw;}
    .logo {width: 18.456vw; height: auto; padding-top: 6.21vw;}
    .line-1 {font-size: 6vw;}
    .line-2 {font-size: 12vw;}
    .line-3 {font-size: 6.6vw;}
    .under-construction {width: 80vw;}
    .gray-bg {height: 50%;}
}