@media screen {

    body {
        display: grid;
        grid-template-rows: 90px minmax(600px, calc(77vh - 130px)) minmax(230px, 23vh) 40px;
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
    }

    .copyright {
        grid-row: 4/5;
        grid-column: 1/2;
    }

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

    .header {
        grid-column: 1/2;
    }

    .specials-container {
        grid-row: 2/3;
        grid-column: 1/2;
        display: grid;
        grid-template-rows: minmax(600px, calc(77vh - 130px));
        grid-template-columns: 100%;
    }

    /* Specials image still overlaps at certain window heights. No idea why.
       Everything should add up to 100vh, but it just doesn't work right.
       max-height: subgrid; works, but is not supported by many browsers yet.
       I have set the min of the above container minmax to 600px to hide the
       incorrect sizing as much as possible. 500px and lower and it's really obvious.
       You can see it now around 975px window height.
     */
    .specials-image {
        grid-row: 1/2;
        grid-column: 1/2;
        justify-self: center;
        max-height: 100%;
        max-width: 95vw;
        min-height: 500px;
        object-fit: contain;
        cursor: pointer;
    }

    .specials-blurb {
        grid-row: 3/5;
        grid-column: 1/2;
        display: grid;
        align-self: center;
        grid-template-rows: auto auto 65px;
        grid-template-columns: minmax(360px, 500px);
        padding: 0 15px;
    }

    .specials-blurb__heading {
        padding-bottom: 10px;
    }

    .specials-blurb__body {
        line-height: 2.2rem;
    }

    .specials-blurb__enquire {
        height: 20px;
        padding: 15px 25px 13px 25px;
        margin-top: 20px;
        justify-self: left;
        align-self: end;
        border: 1px solid #a3a3a3;
        border-radius: 4px;
        text-align: center;
        transition: background-color .2s;
    }

}

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

    body {
        grid-template-rows: 90px min-content max-content auto;
        grid-template-columns: minmax(360px, 100vw);
    }

    .specials-container {
        grid-template-rows: auto;
        grid-template-columns: minmax(360px, 100vw);
        margin: 0;
    }

    .specials-image {
        height: auto;
        width: 100%;
        max-width: unset;
        max-height: unset;
        min-width: 360px;
        margin-top: 10px;
    }

    .specials-blurb {
        grid-template-rows: auto auto 65px;
        grid-template-columns: minmax(340px, 500px);
        padding: 0;
        margin: 30px 10px 20px 20px;
        min-width: 340px;
    }

}