.banner { padding: 5em 0 5em; background-color: var(--fourth-color);}
.banner > div { position: relative; }
.banner .image-content { position: relative; border-radius: 1.5em; overflow: hidden; }
.banner img { width: 100%; height: 100%; object-fit: cover;}
.banner .text-content { position: absolute; background: var(--main-color); color: var(--white-color); top: 1em; left: 1em; width: 30%; padding: 1em; height: calc(100% - 2em); border-radius: 1.5em; display: flex; align-items: center;}
.banner .text-content p:not(:last-child) { margin-bottom: 1em; }
@media all and (max-width: 66em) {
    .banner { padding: 2em 0; }
    .banner .image-content { height: 420px; }
    .banner .text-content { width: 60%; }
}
@media all and (max-width: 33em) {
    
    .banner .text-content { width: calc(100% - 2em); height: unset; top: unset; bottom: 1em; }
    .banner .image-content { height: 600px; }
    .banner h3 { font-size: 1.5em; }
    .banner p { font-size: .75em; }
 }