#content .content-inner .section-hero {
    --hero-h: 250px;
    --hero-focus: 100% 10%;             
    --hero-overlay: rgba(0, 0, 0, .8);  
    position: relative;
    margin: 0 0 20px;
    border-radius: 0;   
    overflow: hidden;
}
#content .content-inner .section-hero .hero-img { height: var(--hero-h); overflow: hidden; }

#content .content-inner .section-hero--fullimg .hero-img { height: auto; }
#content .content-inner .section-hero--fullimg .hero-img img { height: auto; object-fit: fill; }

#content .content-inner .section-hero.section-hero--fullimg .title-main { position: static; }
#content .content-inner .section-hero .hero-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: var(--hero-focus);
    display: block;
}

#content .content-inner .section-hero .title-main {
    position: absolute; bottom: 0; left: 0; width: 100%; z-index: 20;
    margin: 0; padding: 12px 25px 9px; border: 0;
    background: var(--hero-overlay);
    font: 700 var(--h1-size)/1.15 Calibri, 'Segoe UI', Arial, sans-serif;   
    text-transform: uppercase; text-align: left;   
    color: #ffffff;
}

#content .content-inner .section-hero .title-main--nocaps { text-transform: none; }
#content .content-inner .section-hero .title-main > span { display: inline-block; }

#content .content-inner .section-hero .title-main .text-gradient,
#content .content-inner .section-hero .title-main .text-gold-gradient {
    background: linear-gradient(to bottom, #8c6f2f 0%, #fbd167 33%, #917a3f 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: grayscale(1) brightness(1.2);   
}

#content .content-inner .section-hero.section-hero-with-overlay .hero-overlay-img-center img { object-position: center center; }
#content .content-inner .section-hero.section-hero-with-overlay .hero-overlay-side {
    position: absolute; top: 0; right: 0; width: var(--hero-side, 50%); height: calc(100% - 50px);   
    z-index: 5; overflow: hidden; box-sizing: border-box;
}
#content .content-inner .section-hero.section-hero-with-overlay .hero-overlay-side svg {
    display: block; width: 100%; height: 100%;
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 3px 6px #000) drop-shadow(0 0 14px rgba(0, 0, 0, .95));
}

#content .section-hero .title-main--two-line { display: flex; flex-direction: column; gap: 4px; }
#content .section-hero .title-main .title-sub {
    font: 400 15px/1.35 Calibri, 'Segoe UI', Arial, sans-serif; color: #fff; text-transform: none;
    background: none; -webkit-text-fill-color: #fff;
}
@media screen and (max-width: 600px) { #content .section-hero .title-main .title-sub { font-size: 13px; } }

#content .content-inner .section-hero-with-slider .hero-slider-side {
    position: absolute; top: 0; left: 0; z-index: 6;
    width: calc(100% - var(--hero-side, 50%));
    height: calc(100% - 50px);            
    overflow: hidden;
}
#content .content-inner .section-hero-with-slider .hero-team-slider { height: 100%; overflow: hidden; }
#content .content-inner .section-hero-with-slider .hero-team-track {
    display: flex; height: 100%;
    will-change: transform;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
#content .content-inner .section-hero-with-slider .hero-team-card {
    position: relative; flex: 0 0 var(--hero-card-w, 50%); height: 100%;
    margin: 0; padding: 0 5px; box-sizing: border-box; overflow: hidden;
}
#content .content-inner .section-hero-with-slider .hero-team-card img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
    display: block; border-radius: 0;
}
#content .content-inner .section-hero-with-slider .hero-team-card figcaption {
    position: absolute; left: 5px; right: 5px; bottom: 0;
    padding: 6px 8px 8px;
    background: rgba(70, 107, 131, .88);
    color: #fff; text-align: center; line-height: 1.2;
}
#content .content-inner .section-hero-with-slider .hero-team-name {
    display: block; font: 600 14px Calibri, 'Segoe UI', Arial, sans-serif;
}
#content .content-inner .section-hero-with-slider .hero-team-role {
    display: block; font: 400 11px Calibri, 'Segoe UI', Arial, sans-serif; opacity: .9;
}
@media screen and (max-width: 900px) {
    #content .content-inner .section-hero-with-slider .hero-team-card { --hero-card-w: 100%; }
}

@media screen and (max-width: 600px) {
    #content .content-inner .section-hero-with-slider { overflow: visible; }
    #content .content-inner .section-hero-with-slider .hero-img { height: 170px; }
    #content .content-inner .section-hero-with-slider.section-hero-with-overlay .hero-overlay-side { width: 100%; height: 170px; }   
    #content .content-inner .section-hero-with-slider .hero-slider-side {
        position: static; display: block; width: 100%; height: auto;
    }
    #content .content-inner .section-hero-with-slider .hero-team-slider { height: auto; }
    #content .content-inner .section-hero-with-slider .hero-team-track {
        height: auto; transform: none !important; gap: 6px; padding: 6px; background: #0b1a24;
    }
    #content .content-inner .section-hero-with-slider .hero-team-card {
        --hero-card-w: 50%; height: auto; flex: 0 0 calc(50% - 3px);
    }
    #content .content-inner .section-hero-with-slider .hero-team-card img { height: auto; aspect-ratio: 3 / 4; }
    #content .content-inner .section-hero-with-slider .title-main { position: static; width: 100%; }
}

@media screen and (max-width: 600px) {
    #content .content-inner .section-hero-with-overlay:not(.section-hero-with-slider) .hero-overlay-side { width: 62%; left: auto; right: 0; }
}

#content .content-inner .section-hero .title-main--w-logo { display: flex; align-items: center; gap: 10px; }
#content .content-inner .section-hero .title-main__logo { width: 26px; height: 26px; flex: 0 0 auto; display: block; }

#content .content-inner .section-hero .title-main--gold .text-gradient,
#content .content-inner .section-hero .title-main--gold .text-gold-gradient { filter: none; }

#content .content-inner .section-hero .hero-img { position: relative; }
#content .content-inner .section-hero .hero-img::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: rgba(0, 0, 0, var(--hero-shade, 0));
}

#content .content-inner .section-hero:not(.section-hero-with-slider) .hero-img { height: auto; }
#content .content-inner .section-hero:not(.section-hero-with-slider) .hero-img img { height: auto; max-height: var(--hero-h, 250px); object-fit: cover; }

#content .content-inner .section-hero:not(.section-hero-with-slider) .title-main { position: static; }