/**
 * @example
 * <div class="hero-wrapper">
 *      <div class="hero-container ui-container">
 *        inner grid wrapper
 *      </div>
 *  </div>
 */

.hero-wrapper {
    --hero-wrapper-background-color: inherit;
    --hero-wrapper-padding-top: 40px;
    --hero-wrapper-padding-bottom: 40px;

    width: 100%;
    background-color: var(--hero-wrapper-background-color);
    padding-top: var(--hero-wrapper-padding-top);
    padding-bottom: var(--hero-wrapper-padding-bottom);
}

.hero-wrapper--v1 {
    --hero-wrapper-background-color: #eff4fa;
}

/*.hero-container {

}*/

@media (min-width: 1361px) {
    .hero-wrapper {
        --hero-wrapper-padding-top: 60px;
        --hero-wrapper-padding-bottom: 60px;
    }
}

@media (min-width: 1729px) {
    .hero-wrapper {
        --hero-wrapper-padding-top: 100px;
        --hero-wrapper-padding-bottom: 100px;
    }
}