@media only screen and (max-width:1180px) {
    .homepageHeroTextOverlay {
        padding: 0 0 40px 40px;
        font-size: 0.8em;
    }
}

@media only screen and (max-width:900px) {
    .homepage3Col {
        grid-row-gap: 40px;
        max-width: 370px;
        margin: 60px auto 0;
        grid-template-columns: 100%;
    }
    footer {
        grid-template-columns: repeat(2,auto);
        justify-content: space-around;
        grid-row-gap: 40px;
    }
    footer > div:first-child {
        grid-column: span 2;
    }
    footer img {
        margin: 0 auto;
        display: block;
    }
    .homepageHeroTextOverlay h1 {
        font-size: 4em;
        max-width: 480px;
    }
}

@media only screen and (max-width:780px) {
    header > span {
        display: none;
    }
    .homepageHeroTextOverlay h1 {
        font-size: 3em;
        max-width: 370px;
    }
    .contentGreen h1 {
        font-size: 2em;
    }
    .homepageGallery {
        grid-template-columns: repeat(2,44%);
        grid-column-gap: 12%;
    }
    .homepageHeroLogo {
        margin: 30px auto 0;
        width: 140px;
    }
}

@media only screen and (max-width:590px) {
    .homepageHeroTextOverlay {
        font-size: 0.6em;
    }
    .homepageHeroTextOverlay h1::after {
        height: 2px;
    }
    .homepageHeroTextOverlay h1 {
        max-width: 275px;
    }
}

@media only screen and (max-width:520px) {
    header > span {
        display: none;
    }
    .homepageImageGrid {
        grid-template-columns: 100%;
    }
    .homepageHeroTextOverlay {
        display: none;
    }
}

@media only screen and (max-width:480px) {
    .homepageGallery {
        grid-template-columns: 100%;
    }
}

@media only screen and (max-width:460px) {
    footer {
        grid-template-columns: 100%;
        text-align: center;
    }
    footer > div:first-child {
        grid-column: 1;
    }
}