* {
    padding: 0;
    margin: 0;
}
html {
    font-size: 16px;
}
@font-face {
    font-family: 'Inter';
    src: url('/Inter-Variable.woff2');
}
p {
    font-family: "Inter", sans-serif;
    color: #fff;
    font-size: 3vw;
    line-height: 1.4;
}
h1 {
    font-family: "Inter", sans-serif;
    color: #fff;
    font-size: 8vw;
    font-weight: 300;
    line-height: 1.1;
}
h1 span {
    font-family: serif;
    font-size: 8.5vw;
}
a {
    color: inherit;
}
main {
    min-height: 100vh;
    display: grid;
    grid-template-rows: 80vh 80vh;
}
.head {
    position: relative;
    display: grid;
    grid-template-rows: 5fr 2fr;
    background: url("/bg-drops.jpg"); 
    background-size: cover;
}
.head .top .title {
    margin: 2rem 0 0 2rem;
}
.head .top .chrome {
    position: absolute;
    top: 30%;
    right: 0;
    width: 70%;
}
.head .top .chrome img {
    width: 100%;
}
.head .bottom {
    position: relative; 
    background: url("/stone.jpg"); 
    background-size: cover;
}
.head .bottom .logo {
    width: 60%;
    margin: -28% 0 0 25%;
}
.head .bottom .logo img {
    width: 100%;
}
.head .bottom .address {
    position: absolute;
    bottom: 2rem;
    left: 25%;
}
.head .bottom .address .tel {
    font-size: 5vw;
}
@media (orientation: landscape) {
    main {
        grid-template-rows: unset;
        grid-template-columns: 2fr 1fr;
    }
    .head .top .title {
        margin: 3rem 0 0 7%;
    }
    .head .top .chrome {
        top: 25%;
        right: 0;
        width: 60%;
    }
    .head .bottom .logo {
        width: 30%;
        margin: -14% 0 0 50%;
    }
    p {
        font-family: "Inter", sans-serif;
        color: #fff;
        font-size: 1.3vw;
    }
    h1 {
        font-size: 7vh;
    }
    h1 span {
        font-size: 8vh;
    }
    .head .bottom .address {
        position: absolute;
        bottom: 2rem;
        left: 50%;
    }
    .head .bottom .address .tel {
        font-size: unset;
    }
}