.hero__grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
}

@media screen and (min-width: 750px) {
    .hero__grid {
        flex-direction: row;
    }
    
    .hero__grid--reverse {
        flex-direction: row-reverse;
    }
}

.hero__content {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    position: relative;
    z-index: 1;
}


.hero__media-item img {
    border-radius: 20px;
}

@media screen and (min-width: 750px) {
    
    .hero__media-item,
    .hero__text-item {
        flex: 0 0 calc(50% - 24px);
        min-height: 100%;
        overflow: visible;
    }

    .hero__content {
        padding: 0 40px 0 0;
        height: 100%;
    }

    .hero__grid--reverse .hero__content {
        margin-left: auto;
    }

    .hero__content--bottom {
        justify-content: flex-end;
        align-self: flex-end;
    }

    .hero__content--top {
        justify-content: flex-start;
        align-self: flex-start;
    }

    .hero__content--desktop-right > * {
        align-self: flex-end;
        text-align: right;
    }

    .hero__content--desktop-left > * {
        align-self: flex-start;
        text-align: left;
    }

    .hero__content--desktop-center > * {
        align-self: center;
        text-align: center;
    }
}

.hero {
    background-repeat: no-repeat;
    background-size: 100%;
}

.hero--assessment {
    background-image: url("assessment.svg");
}

.hero--assessment-overview {
    background-image: url("assessment-overview.svg");
    background-position: bottom;
    background-size: cover;
}

.hero--therapy {
    background-image: url("therapy.svg");
    background-position: left bottom;
}

.hero--school-support {
    background-image: url("school-support.svg");
    background-position: center bottom;
}