/* ====== HERO BANNER =====*/
/* to do: set max-width globally;
probably add margins to text things maybe instead of depending on bs */
.hero-banner {
    position: relative;
    overflow: hidden;
    max-width: 1372px;
    margin: 0 auto 1rem;
}
.hero-banner__image-container {
    position: relative;
    min-height: 440px;
    margin-bottom: 30px;
}
.hero-banner__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /*override later with actual coords depending on photo */
    z-index: 0;
}
.hero-banner__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    margin-top: 1%;
}
.hero-banner__title {
    color: #fff;
    font-weight: 800;
    font-size: 4.8rem;
    text-shadow: 3px 2px 8px rgba(0,0,0,.8);
}
.hero-banner__subtitle {
    color: #fff;
    font-size: 3.6rem;
    font-style: italic;
}

/* ===== graadient i will fix this laterer======= */
.hero-banner--gradient .hero-banner__content {
background: linear-gradient(90deg,rgba(22,50,92,.9) 0%,rgba(22,50,92,.5) 40%, rgba(22,50,92,0) 100%); }
/* ======= responsiveness ==========*/
/* titles, text */
@media (max-width: 600px) {
    .hero-banner__title {font-size: 3.6rem; letter-spacing: -.01em;}
    .hero-banner__subtitle {font-size: 3rem;}
}

/* == imgs ==*/
@media (max-width: 1020px) {
    .hero-banner__image {object-position: 80% center;}
    .hero-banner__title {max-width: 65%;}
}
@media (max-width: 600px) {
    .hero-banner__image {object-position: 0 center;}
}
@media (max-width: 400px) {
    .hero-banner__image-container {aspect-ratio: 4/3;}
    .hero-banner__image {object-position: 0 center;}
}