/*====================
HERO SECTION IMAGE AND TEXT BOX
==================== */

.hero-container {
flex-direction: row-reverse;
gap: 7px;
width: 99%;
display: flex;
}

.hero-media {
flex: 0 1 456px;
}

.hero-text-stack {
flex: 0 1 544px;
gap: 2px;
}

.text-box {
padding: 5px 5px;
}

.text-box-1 { background: #fdfce0; border-color: #2e6b4f; flex: 1; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); padding: 5px 7px; }
.text-box-1 p { color: #8F6378; font-size: 2.5rem; line-height: 1.15; }

.text-box-2 { background: #F3FFFF; border-color: #3F968C; flex: .9; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); padding: 10px 10px; }
.text-box-2 p { color: #3F968C; font-size: 2.45rem; line-height: 1.15; }

.text-box-3 { background: #fbeef5; border-color: #828281; flex: .65; box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84); padding: 10px 10px; }
.text-box-3 p { color: #828281; font-size: 2.6rem; line-height: 1.15; }

@media (max-width: 768px) {
 
.hero-container {
display: flex;
flex-direction: column;
gap: 4px;
}
  
.hero-text-stack {
display: contents;
}

.text-box-1 { order: 1; }
.text-box-2 { order: 2; }
.hero-media--square { order: 3; }
.text-box-3 { order: 4; }
  
.text-box-1 p { font-size: clamp(1.7rem, 8.9vw, 3.4rem); }
.text-box-2 p { font-size: clamp(1.7rem, 9.8vw, 3.6rem); }
.text-box-3 p { font-size: clamp(1.7rem, 11vw, 3.6rem); }
}