.about {
    padding: 0;
    position: relative;
}

.about-bg-image,
.about-bg-image>img {
    width: 100%;
    max-height: 100%;
    min-height: 1000px;
}

.about-bg-image img {
    object-fit: cover;
}

.about-text {
    background-image: linear-gradient(to right,
            rgb(40, 54, 24, .5),
            var(--color-primary-dark) 48px);
    color: var(--color-primary-light);
    padding: var(--spacing-lg);

}

.about-heading {
    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 100;
    color: var(--color-highlight);
}

.about-tagline {
    line-height: 1.5rem;
    font-size: 1.2rem;
    color: var(--color-lowlight);
    margin-bottom: var(--spacing-lg);
}

.about-text>p {
    line-height: 1.5rem;
    font-size: 1.2rem;
}

@media screen and (width > 1300px) {

    .about-text {
        position: absolute;
        width: calc(50% - var(--spacing-md));
        height: 100%;
        top: 0;
        right: 0;
    }

}