.results {
    width: 100%;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
}

/*#results-text-1 {grid-area: results-text-1}
#before-image-1 {grid-area: before-image-1}
#after-image-1 {grid-area: after-image-1}

#results-text-2 {grid-area: results-text-2}
#before-image-2 {grid-area: before-image-2}
#after-image-2 {grid-area: after-image-2}

#results-text-3 {grid-area: results-text-3}
#before-image-3 {grid-area: before-image-3}
#after-image-3 {grid-area: after-image-3}*/

.results-text {
    padding: var(--spacing-md);
    background-color: var(--color-primary-light);
    border-left: solid 8px var(--color-highlight);
    position: relative;
}

.results-heading {
    color: var(--color-lowlight);
}

.results-summary {
    margin-top: var(--spacing-md);
    color: var(--color-secondary-dark);
}

.bg-number {
    font-size: 14rem;
    line-height: 12rem;
    color: var(--color-highlight);
    opacity: .2;
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-md);
}

.results-image {
    position: relative;
}

.results-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.results-image figcaption {
    font-family: var(--font-heading);
    color: var(--color-primary-light);
    line-height: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    width: 100%;
    text-align: center;
    background-image: linear-gradient(rgb(188, 108, 37, 0) 1%, rgb(188, 108, 37, 0.5) 20%, rgb(188, 108, 37) 100%);
    position: absolute;
    bottom: 0;
}

@media screen and (width > 540px) {

    #results-text-1 {grid-area: results-text-1}
    #before-image-1 {grid-area: before-image-1}
    #after-image-1 {grid-area: after-image-1}

    #results-text-2 {grid-area: results-text-2}
    #before-image-2 {grid-area: before-image-2}
    #after-image-2 {grid-area: after-image-2}

    #results-text-3 {grid-area: results-text-3}
    #before-image-3 {grid-area: before-image-3}
    #after-image-3 {grid-area: after-image-3}

    .results {
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "before-image-1 after-image-1"
        "results-text-1 results-text-1"
        "before-image-2 after-image-2"
        "results-text-2 results-text-2"
        "before-image-3 after-image-3"
        "results-text-3 results-text-3";
    }

}

@media screen and (width > 1200px) {

    .results {
        grid-template-columns: 33.33% 33.33% 33.33%;
        grid-template-areas:
            "results-text-1 before-image-1 after-image-1"
            "before-image-2 after-image-2 results-text-2"
            "results-text-3 before-image-3 after-image-3";
    }

}