body {
    margin: .25rem;
    padding: 0;
    box-sizing: border-box;
    background-color: #3C3C3C;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 
    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

img {
    width: 100%;
}

h1 {
    font-size: clamp(3rem, 5vw, 60rem);
    font-weight: 400;
    filter: drop-shadow(.75rem .75rem 1rem #1a1a1abb);
}
h2 {
    font-size: clamp(3rem, 4vw, 60rem);
    font-weight: 400;
    filter: drop-shadow(.75rem .75rem 1rem #1a1a1abb);
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-areas:
    "main main main main"
    "first_section first_section first_section first_section"
    "second_section second_section third_section third_section"
    "footer footer footer footer";
    
    height: auto;
    width: 100%;
    margin: auto;
    color: white;
    place-items: center;
}
@media (max-width: 945px) {
    .grid-container {

    grid-template-areas: 
    "main"
    "first_section"
    "second_section"
    "third_section"
    "footer";
}
}

main, 
section, 
footer {
    display: grid;
    grid-area: main;
    width: 100%;
    margin: auto;
    justify-content: center;
    align-items: center;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    width: 100%;
    margin: auto;
    max-width:1840px;
    place-items: center;
    text-align: left;
    gap: 2em;
}
@media (max-width: 945px) {
.wrapper {
    width: 80%;
    margin: auto;
}
}

main {
    grid-area: main;
    background: #2A0A49;
    height: 65vh;
    border-radius: 8px 8px 0 0;
}

section.first_section {
    grid-area: first_section;
    background: black;
    height: 65vh;
}

section.second_section {
    grid-area: second_section;
    background: #2A0A49;
    height: 50vh;
}

section.third_section {
    grid-area: third_section;
    background: gray;
    height: 50vh;
}

footer {
    grid-area: footer;
    background: #171717;
    height: 50svh;
    border-radius: 0 0 8px 8px;
}