/*==========================================
-------- HERO SECTION
========================================== */

.section-hero {
  background-attachment: fixed !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  padding: 0 var(--m16);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.breadcrumbs{
    justify-self: center;
    align-self: center;
    font-size: clamp(0.6rem, 0.4rem + 1.28vw, 0.8rem);
    border-radius: 4px;
    padding: 4px;
    color: var(--lnk-nav);
}
.breadcrumbs a {
    text-decoration: none;
    color: var(--lnk-nav);
}

.breadcrumbs a:hover {
    text-decoration: none;
    color: var(--lnk-nav-hov);
}

.hero-desktop { height: 400px; }
.hero-mobile { height: 550px; }

.hero-columns{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--m16);
}

.hero-title {
    align-self: center;
    text-align: center;
    width: 100%;
    font-size: clamp(0.9rem, 0.1rem + 6.4vw, 1.5rem);
}

.hero-title-page {
    align-self: center;
    text-align: center;
    width: 100%;
    font-size: clamp(1.5rem, 0.5rem + 6.4vw, 2.5rem);
}

@media (min-width: 400px) {
    .hero-title {
        font-size: clamp(1.5rem, 1.3885rem + 0.5096vw, 2rem);
    }
}

.hero-txt {
    max-width: 57ch;
    align-self: center;
    text-align: center;
}

.hero-logo{
    align-self: center;
    width: 80%;
}

@media (min-width: 350px) {
    .hero-logo{
        align-self: center;
        width: 256px;
    }
}