<div class="hero1"> <div class="hero1_box"> <h1 class="hero1_title"></h1> <p class="hero1_subtitle">[[{{ config["subtitle"] }}]]</p> </div> <div class="hero1_banner"> </div> </div> <style> .hero1 { position: relative; padding: 2.5rem; background-color: var(--hero-background); border-radius: 1.2rem; box-shadow: 0 8px 32px #0000004D; min-height: 400px; width: 100%; max-width: 1200px; overflow: hidden; display: flex; align-items: center; gap: 2.5rem; margin: 2rem auto; color: var(--hero-text); } .hero1_box { position: relative; z-index: 3; max-width: 500px; flex-shrink: 1; } .hero1_title { font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: bold; color: var(--hero-text); margin: 0; text-shadow: 0 2px 4px #00000033; line-height: 1.2; } .hero1_subtitle { margin-top: 1rem; background-color: var(--hero-subtitle-background); color: var(--hero-subtitle-text); padding: 0.4rem 0.8rem; border-radius: 0.4rem; display: inline-block; text-shadow: 0 1px 2px #00000033; box-shadow: 0 2px 4px #00000033; font-size: clamp(0.875rem, 2vw, 1rem); max-width: 100%; } .hero1_banner { flex-grow: 1; background-color: var(--hero-banner-background); padding: 1.3rem; border-radius: 0.8rem; line-height: 1.4; font-size: 1rem; min-height: 300px; color: var(--hero-text); } @media (max-width: 768px) { .hero1 { padding: 1.6rem; min-height: 250px; width: 90%; flex-direction: column; } .hero1_box { padding-right: 0; max-width: 100%; } .hero1_subtitle { margin-top: 0.75rem; } .hero1_banner { padding: 1.2rem; } } @media (max-width: 480px) { .hero1_banner { font-size: 0.9rem; padding: 1rem; } .hero1 { padding: 1rem; min-height: 200px; width: 85%; } } </style>