.text-and-image{
    padding: var(--padding-xl) var(--padding);
}
.text-and-image .image-area{
    width: 100%;
}
.text-and-image .text-section{
    width: 100%;
    display: flex;
    flex-direction: column;
}

@media (min-width:992px) {
    .text-and-image{
        flex-direction: row;
    }
    .text-and-image .image-area{
        width: 33%;
    }
}