@media screen {

    body {
        display: grid;
        grid-template-rows: 90px 50vh calc(50vh - 130px) 40px; /* don't forget to account for grid-gap in total height */
        grid-template-columns: 100%;
        /*grid-gap: 3vh;*/
        align-items: center;
        justify-items: center;
    }

    .copyright {
        grid-row: 4/5;
        grid-column: 1/2;
    }
    
    .bold {
        color: #fff;
    }

    .lower-background {
        grid-row: 3/5;
        grid-column: 1/2;
        align-self: stretch;
        justify-self: stretch;
        background-color: #1f2025;
    }

    .swish {
        grid-row: 1/3;
        grid-column: 1/2;
        justify-self: left;
        height: 100%;
        /*width: auto;*/
        max-width: 100%;
    }

    .main {
        grid-row: 2/3;
        grid-column: 1/2;
        display: grid;
        grid-template-columns: 300px 450px;
        grid-gap: 20px;
    }

    .main__figure {
        grid-row: 1/2;
        grid-column: 1/2;
        width: 100%;
        height: auto;
        justify-self: center;
    }

    .main__article {
        grid-row: 1/2;
        grid-column: 2/3;
        display: grid;
        grid-template-rows: repeat(3, min-content);
        align-content: end;
    }

    .main__heading {
        grid-row: 1/2;
        font-size: 6rem;
        /*font-weight: 300;*/
    }

    .main__subheading {
        grid-row: 2/3;
        font-size: 2.87rem;
        font-weight: 300;
        margin-left: 4px;
    }

    .main__body {
        grid-row: 3/4;
        margin-top: 15px;
        margin-left: 6px;
        color: #cdcdcd;
        line-height: 1.5;
    }

    .blurb {
        grid-column: 1/2;
        grid-row: 3/4;
        display: grid;
        grid-template-rows: min-content;
        grid-template-columns: repeat(3, 360px);
        grid-gap: 3vw;
    }

    .blurb__article {
        display: grid;
        grid-template-rows: 35px auto;
        grid-template-columns: 130px 210px;
        border-radius: 2px;
        /*border: 1px solid rgba(255, 255, 255, 0.1);*/
        padding: 25px 5px;
        transition: background-color .2s, box-shadow .2s;
    }

    .blurb__article:hover {
        background-color: #2a639a;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
        transition: background-color .2s, box-shadow .2s;
    }

    .blurb__figure {
        grid-row: 1/3;
        grid-column: 1/2;
        justify-self: center;
        align-self: center;
    }

    .blurb__heading {
        grid-row: 1/2;
        grid-column: 2/3;
        font-size: 2rem;
        /*font-weight: 300;*/
    }

    .blurb__body {
        grid-row: 2/3;
        grid-column: 2/3;
        line-height: 1.5;
        color: #cdcdcd;
    }

}

@media screen and (max-width: 1220px) {

    .blurb {
        grid-gap: 1vw;
    }

}

@media screen and (max-width: 1105px) {

    body {
        grid-template-rows: 90px max-content max-content;
        /*grid-gap: 3vh;*/
    }

    .main {
        grid-template-columns: 400px;
        grid-template-rows: min-content;
        margin: 0 10px 20px 10px;
    }

    .main__figure {
        width: 300px;
    }

    .main__article {
        grid-row: 2/3;
        grid-column: 1/2;
        text-align: center;
    }

    .blurb {
        grid-template-rows: repeat(3, 180px);
        grid-template-columns: 400px;
        grid-gap: 3vh;
        margin: 30px 0 20px 0;
    }

}

@media screen and (max-width: 420px) {

    body {
        grid-template-columns: minmax(360px, 420px);
        grid-template-rows: 90px max-content min-content;
        /*grid-gap: unset;*/
    }

    .lower-background {
        min-width: 360px;
    }

    .main {
        grid-template-columns: minmax(340px, 420px);
    }

    .main__figure {
        width: 250px;
    }

    .main__heading {
        font-size: 5.15rem;
    }

    .main__subheading {
        font-size: 2.5rem;
    }

    .blurb {
        grid-template-rows: repeat(3, min-content);
        grid-template-columns: minmax(340px, 420px);
        margin: 30px 10px 12px 10px;
        /*font-size: 1rem;*/
    }

    .blurb__article {
        grid-template-columns: 130px minmax(190px, 210px);
    }

}