header,
.section {
    grid-template-columns: auto 1240px auto;
    display: grid;
}


.section,
footer {
    background-color: #fefefe;
}

.content {
    display: grid;
    grid-column: 2/3;
    grid-column-gap: 46px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 50px;
    padding-top: 50px;
    gap: 50px;
}

    .content h2 {
        text-align: center;
    }

    .content .feature {
        display: grid;
        grid-template-columns: 275px auto;
        grid-template-rows: 1fr;
        gap: 32px;
    }

a {
    color: #c8593b;
}

    a.cta {
        color: #f5f5f5;
        text-decoration: none;
        cursor: pointer;
        border: none;
        border-radius: 12px;
        background-color: #e97c52;
        padding-top: 7px;
        padding-bottom: 9px;
        padding-left: 12px;
        padding-right: 12px;
        justify-self: left;
        align-self: center;
        font-size: 0.95em;
    }

@media(max-width:1230px) {

    header,
    .section {
        grid-template-columns: auto;
    }

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


@media(max-width:1000px) {
    .content {
        grid-column-gap: 34px;
        padding-left: 20px;
        padding-right: 20px;
    }
}



@media (max-width:930px) {
    .content {
        grid-column-gap: 48px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width:768px) {

    .content {
        gap: 12px;
    }

        .content .feature {
            grid-template-columns: auto;
            gap: 12px;
        }


        .content .feature.quiz {
            margin-bottom:24px;
        }

            .content .feature.quiz:last-of-type{
                margin-bottom:0px;
            }

            .content .feature img {
                justify-self: center;
                grid-row: 2 / 3;
                margin-top:24px;
            }
}



@media (max-width:600px) {
    .content {
        padding-left: 20px;
        padding-right: 20px;
    }
}