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

h1 {
    padding: 10px;
    font-size: 32px;
}

a {
    text-decoration: none;
    color: #000;
    font-size: 1em;
}

.container {
    background-image: url(../pages-static-content/sample-media/image-stock-hero-1.jpg);
    background-position: center;
    height: 100vh;
    width: auto;
    background-size: cover;
    display: grid;
    grid-template-rows: 0.1fr 1fr;
    margin: 0px;
    padding: 0px;
}

.main-nav {
    text-align: center;
    background-color: #e1781e;
    padding: 4px;
}

.nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-decoration: none;
    list-style-type: none;
    font-size: 1rem;
    padding: 12px;
}

.hook-content {
    text-align: center;
    align-content: center;
    align-self: center;
    font-size: 5em;
    padding-left: 3rem;
    padding-right: 3rem;
}

p {
    margin-bottom: 2rem;
}

button {
    font-size: 24px;
    border: none;
    border-radius: 20px;
    padding: 1rem;
    margin: 32px;
    background-color: #e1781e;
}

.nav-logo {
    display: none;
    background-image: url(../pages-static-content/sample-media/images-logo-eatwell-1.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: auto;
}

@media (min-width: 576px) {
    .main-nav {display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 2fr 1fr; padding: 10px;}
    .nav-logo {display: block; grid-column: 2 / span 2; width: 64px; height: 64px; align-self: center; justify-self: center;}
    h1 {text-align: left; grid-column: 4 / span 10; align-self: center; font-size: 36px;}
    .nav-list {grid-row: 2 / span 3; grid-column: 1 / span 12; align-self: center; font-size: 24px;}
}

@media (min-width: 992px) {
    .main-nav {display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr;  padding: 10px;}
    h1 {align-self: center; text-align: left; font-size: 38px; grid-column: 3 / span 10; grid-row: 1;}
    .nav-list {align-self: center; font-size: 20px; grid-column: 12 / span 1; grid-row: 1; padding: 12px;}
    .nav-logo {display: block; grid-column: 1 / span 2; grid-row: 1; width: 128px; height: 128px; background-image: url(../pages-static-content/sample-media/images-logo-eatwell-1.png); background-size: cover; background-repeat: no-repeat; margin: auto;}
    li {padding: 6px;}
}

@media (min-width: 997px) {
    li {padding: 18px;}
}


@media (min-width: 1400px) {
    .hook-content {margin: 12px;}
    p {margin-top: 128px; margin-bottom: 64px;}
}