/* hero
------------------------- */

.hero-grid {
    padding: 0;
    margin: 20px 0;
    border-radius: 0;
}

/* necessary for proper sizing with margins */
.hero-grid__grid-sizer {
    position: absolute;
}


.hero-grid__gutter-sizer {
    width: 1%;
}

.hero-grid__item {
    float: left;
    border-radius: 0;
    background: #D8D6D2;
}

@media only screen and (min-width: 1368px) {

    .hero-grid__grid-sizer,
    .hero-grid__item {
        width: 320px;
        margin: 0 10px 21px 10px;
    }

    .hero-grid__item--width2 {
        width: 662px;
    }


    .hero-grid__item--width3 {
        width: 71.5%;
    }

    .hero__title {
        font-size: 6rem;
    }

    .hero__tagline {
        font-size: 2rem;
    }

    .hero__what-is-title {
        font-size: 2rem;
    }

    .hero__what-is-description {
        font-size: 1.1rem;
    }

    .hero-grid__big-button {
        padding-left: 60px;
        min-height: 60px;
    }

        .hero-grid__big-button svg {
            display: block;
            position: absolute;
            left: 10px;
            top: 10px;
            width: 40px;
            height: 40px;
        }
}

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

    .hero-grid__grid-sizer,
    .hero-grid__item {
        width: 23%;
        margin: 0 1% 21px 1%;
    }

    .hero-grid__item--width2 {
        width: 48%;
    }


    .hero-grid__item--width3 {
        width: 71.5%;
    }

    .hero__title {
        font-size: 6rem;
    }

    .hero__tagline {
        font-size: 2rem;
    }

    .hero__what-is-title {
        font-size: 2rem;
    }

    .hero__what-is-description {
        font-size: 1.1rem;
    }

    .hero-grid__big-button {
        padding-left: 60px;
        min-height: 60px;
    }

        .hero-grid__big-button svg {
            display: block;
            position: absolute;
            left: 10px;
            top: 10px;
            width: 40px;
            height: 40px;
        }
}

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

    .hero-grid__item,
    .hero-grid__grid-sizer {
        width: 100%;
        margin: 0 0 21px 0;
    }


    .hero-grid__item--width2,
    .hero-grid__item--width3 {
        width: 100%;
    }
}