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

.text-and-image .image-area{
    width: 100%;
}
.text-section-surround {
    justify-content: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.text-and-image .text-section{
    width: 100%;
    display: flex;
    flex-direction: column;
}
@media (min-width:772px) {
    .text-section-surround {
        padding: var(--padding-large);
    }
}
@media (min-width:992px) {
    .text-and-image .text-and-image-surround{
        flex-direction: row;
    }
}