main {
    display: grid;
    grid-template-areas:
        "heading heading heading heading"
        "hero hero hero hero"
        "col1 col2 col3 col4"
        "footer footer footer footer";
    grid-template-rows: 1fr 2fr 2fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: center;

    background-image: url(Images/white-particles-background.png);
}

#heading {
    grid-area: heading;
    font-family: "Isometra", serif;
}

#hero {
    grid-area: hero;
}

#col1 {
    grid-area: col1;
    font-family: "Libre Caslon Condensed", serif;
}

#col2 {
    grid-area: col2;
    font-family: "Libre Caslon Condensed", serif;
}

#col3 {
    grid-area: col3;
    font-family: "Libre Caslon Condensed", serif;
}

#col4 {
    grid-area: col4;
    font-family: "Libre Caslon Condensed", serif;
}

#footer {
    grid-area: footer;
    font-family: "Libre Caslon Condensed", serif;
}

main > * {
    border: solid 1px black;
}

.opacity {
    opacity: 0.75;
}