*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-image: linear-gradient(55deg, #f3ead9, #dfdeded1 36%, #abb6bc 100%);
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
}

img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

h1,
h2,
h3,
header p,
.quick-links-list__item__link-wrapper,
footer {
    font-family: 'Roboto', sans-serif;
}

header {
    color: white;
    background-image: url('hero_image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* min-height: 480px; */
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: center;
    text-align: center;
}

header>*:not(nav),
nav>section,
main>section {
    max-width: min(100vw, 1100px);
    margin-inline: auto;
    padding-inline: 1rem;
}

.hero {
    padding-block: 32px;
}

header nav {
    background-color: white;
    padding-block: 1rem;
    text-align: left;
}

header nav>a {
    display: flex;
    width: fit-content;
}

header h1 {
    font-size: 3.75rem;
}

header p {
    font-size: 2.75rem;
}

main {
    margin-block: 60px;
}

.quick-links-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    padding-inline-start: 0;
    gap: 48px;
    max-width: 1100px;
    margin-inline: auto;
}

.quick-links-list~.quick-links-list {
    margin-block-start: 48px;
}

.quick-links-list__item {
    background-color: white;
    padding: 48px 32px;
    aspect-ratio: 1;
    border-radius: 4px;
}

.quick-links-list__item__link-wrapper {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    gap: 48px;
    justify-items: center;
    align-items: center;
    text-decoration: none;
    color: black;
}

.quick-links-list__item__link-wrapper h2 {
    font-size: 1.6rem;
    margin: 0;
}

.quick-links-list__item__link-wrapper img {
    min-height: 0;
}

.quick-links-list__item__link-wrapper p {
    font-size: 1rem;
    text-align: center;
    margin: 0;
}

footer {
    background-color: black;
    color: white;
    margin-inline: auto;
    text-align: center;
    padding: 2rem;
    display: grid;
    justify-content: center;
    grid-template-columns: auto auto;
    row-gap: 1rem;
    align-items: center;
    width: 100%;
}

footer p {
    margin: 0;
}

footer a {
    color: white;
    text-decoration: none;
}

footer>nav {
    grid-column: 1 / -1;
}

footer ul {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

footer ul li~li {
    border-left: 2px solid white;
    padding-left: .5rem;
}