.section.hero .content {
    display: grid;
    grid-template-columns: auto 550px;
    grid-template-rows: auto;
    grid-column-gap: 75px;
}

    .section.hero .content > div {
        padding-top: 24px;
    }

        .section.hero .content > div h1 {
            font-size: 3em;
        }

        .section.hero .content > div p {
            font-size: 1.1em;
        }


@media (max-width:1280px) {

    .section.hero .content {
        grid-template-columns: auto 500px;
    }

        .section.hero .content img {
            width: 450px;
            height: 450px
        }
}


@media (max-width:1150px) {

    .section.hero .content {
        grid-template-columns: auto 450px;
    }

        .section.hero .content img {
            width: 400px;
            height: 400px
        }


        .section.hero .content > div h1 {
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 2.5em;
        }
}


@media (max-width:1080px) {

    .section.hero .content {
        grid-template-columns: auto 350px;
    }

        .section.hero .content img {
            width: 350px;
            height: 350px
        }


    .section.hero .content {
        grid-column-gap: 24px;
    }
}


@media (max-width:1000px) {

    .section.hero .content > div h1 {
        font-size: 2.3em;
    }

    .section.hero .content > div p {
        font-size: 1em;
    }
}



@media (max-width:890px) {

    .section.hero .content > div h1 {
        font-size: 2em;
    }


    .section.hero .content {
        grid-template-columns: auto 300px;
    }

        .section.hero .content img {
            width: 300px;
            height: 300px;
            align-self: center;
        }
}



@media (max-width:850px) {

    .section.hero .content > div h1 {
        font-size: 1.7em;
    }

    .section.hero .content > div p {
        font-size: 0.95em;
        margin-top: 12px;
    }

        .section.hero .content > div p:last-of-type {
            display: none;
        }

    .section.hero .content {
        grid-template-columns: auto 250px;
    }

        .section.hero .content img {
            width: 250px;
            height: 250px;
            align-self: center;
        }
}


@media (max-width:768px) {


    .section.hero .content {
        grid-template-columns: auto;
    }

        .section.hero .content img {
            justify-self: center;
            width: 200px;
            height: 200px;
        }


        .section.hero .content > div h1 {
            font-size: 2em;
            text-align: center;
            margin-bottom: 24px;
        }

        .section.hero .content > div p {
            font-size: 1.1em;
            text-align: center;
        }
}


@media (max-width:650px) {
    .section.hero .content > div h1{
        text-align:left;
    }
    .section.hero .content > div p {
        text-align: left;
    }
}


@media (max-width:600px) {


    .section.hero .content > div p {
        font-size: 1.2em;
    }
}