* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
    font-family:sans-serif;
}

.slider {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background-image: linear-gradient(to left, #ba7453, #d1a984);
    z-index:-1;
}

nav {
    display:grid;
    grid-template-columns: 10% 1fr 1fr 10%;
    min-height:10vh;
    color:white;
    align-items:center;
}

#logo {
    grid-column:2/3;
    font-size:24px;
}

.hamburger {
    justify-self:end;
}

section {
    display:flex;
    height:80vh;
    justify-content:center;
    align-items:center;
}

.hero {
    height:70%;
    width:100%;
    position: relative;
}

.hero img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.headline {
    position: absolute;
    top:30%;
    left:10%;
    font-size:100px;
    transform:translate(-20%, -70%);
    color:white;
    z-index:3;
}

.hero::after {
    content:'';
    background:black;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    opacity: 0.3;
}