.banner {
  position: relative;
  inline-size: 100%;
  block-size: auto;
  overflow: hidden;

  @media screen and (min-width: 90rem) {
    block-size: 80vh;
  }

  @media (min-width: 48rem) and (max-width: 90rem) {
    block-size: clamp(55vh, 43.9375rem, 50.5rem);
  }

  @media (min-width: 30rem) and (max-width: 48rem) {
    block-size: 65vh;
  }

  @media (min-width: 26.875rem) and (max-width: 30rem) {
    block-size: 75vh;
  }

  @media screen and (max-width: 26.875rem) {
    block-size: 85vh;
  }
}

.banner__image {
  background-color: var(--color-black);

  img {
    inline-size: 100%;
    object-fit: cover;
    opacity: 0.5;

    @media screen and (min-width: 90rem) {
      block-size: 80vh;
    }

    @media (min-width: 48rem) and (max-width: 90rem) {
      block-size: clamp(55vh, 43.9375rem, 50.5rem);
    }

    @media (min-width: 30rem) and (max-width: 48rem) {
      block-size: 65vh;
    }

      @media (min-width: 26.875rem) and (max-width: 30rem) {
      block-size: 75vh;
    }

      @media screen and (max-width: 26.875rem) {
      block-size: 85vh;
    }
  }
}

.banner--primary .banner__content {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  inline-size: 100%;
  transform: translate(0%, 0%);
  color: var(--banner-content-text-color);
  inset-inline-start: 0;
  max-inline-size: 100%;
  inset-block-start: 0;

  @media screen and (min-width: 90rem) {
    flex-direction: row;
  }

  @media (min-width: 48rem) and (max-width: 90rem) {
    gap: 1rem;
  }

  @media screen and (max-width: 48rem) {
    flex-direction: column;
    gap: 5rem;
    block-size: 100%;
  }

  .logo {
    position: relative;
    display: block;
    flex: 1 0 40%;
    padding: 0;

    @media screen and (min-width: 90rem) {
      flex: 1 0 40%;
    }

    @media screen and (max-width: 48rem) {
      flex: 0 0 auto;
    }

    img {
      position: relative;
      inset-inline-start: 0;
      inset-block-start: 0;

      @media screen and (min-width: 90rem) {
        inline-size: 35.0625rem;
        block-size: auto;
      }

      @media (min-width: 48rem) and (max-width: 90rem) {
        max-inline-size: min(20.5rem, 35.0625rem);
      }

      @media (min-width: 30rem) and (max-width: 48rem) {
        max-inline-size: 18.4rem;
      }

      @media (min-width: 26.875rem) and (max-width: 30rem) {
        inline-size: min(17.8rem, 18.4rem);
      }

      @media screen and (max-width: 26.875rem) {
        inline-size: 17.8rem;
      }
    }
  }

  .text {
    position: relative;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    @media screen and (min-width: 90rem) {
      flex: 1 0 auto;
    }

    @media (min-width: 48rem) and (max-width: 90rem) {
      flex: 1 0 auto;
      max-inline-size: 90vw;
      block-size: auto;
      margin: auto;
      justify-content: flex-end;
    }

    @media (min-width: 30rem) and (max-width: 48rem) {
      justify-content: flex-end;
      padding: 1.25rem;
    }

      @media screen and (max-width: 30rem) {
      justify-content: flex-end;
      padding: 1.25rem;
    }
  }
}

.banner--primary .field--name-localgov-title {
  letter-spacing: .65px;
  color: var(--banner-content-text-color);
  text-shadow: 0 4px 50px var(--color-black);
  font-family: var(--font-family-primary), sans-serif;
  font-size: var(--font-size-banner-title);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-1-line-height);
  margin-block: 1.125rem 0;
  padding-inline: 0;

  @media screen and (min-width: 90rem) {
    font-size: var(--font-size-banner-title);
  }

  @media (min-width: 73.75rem) and (max-width: 90rem) {
    font-size: min(4.375rem, var(--font-size-banner-title));
  }

  @media (min-width: 67.5rem) and (max-width:73.75rem) {
    font-size: min(3.75rem, 4.375rem)
  }

  @media (min-width: 48rem) and (max-width: 67.5rem) {
    font-size: min(3rem, 3.75rem);
  }

  @media screen and (max-width: 48rem) {
    font-size: var(--font-size-banner-title-m);
  }
}

.banner--primary .field--name-localgov-subsites-banner-text {
  letter-spacing: 0.0185rem;
  color: var(--banner-content-text-color);
  text-shadow: 0 4px 50px var(--color-black);
  font-size: var(--font-size-banner-desc);
  font-weight: 400;
  font-style: normal;
  line-height: 40px;

  @media screen and (min-width: 90rem) {
    font-size: var(--font-size-banner-desc);
    max-inline-size: 700px;
    line-height: normal;
    letter-spacing: normal;
    margin-inline-end: auto;
  }

  @media (min-width: 67.5rem) and (max-width: 90rem) {
    font-size: min(var(--font-size-banner-desc-m), var(--font-size-banner-desc));
    max-inline-size: min(55vw, 700px);
  }

  @media (min-width: 48rem) and (max-width: 67.5rem) {
    font-size: min(var(--font-size-banner-desc-m), var(--font-size-banner-desc));
    max-inline-size: min(55vw, 700px);
  }

  @media (min-width: 30rem) and (max-width: 48rem) {
    font-size: var(--font-size-banner-desc-m);
    max-inline-size: 90vw;
    line-height: min(2rem, 2.5rem);
  }

  @media (min-width: 26.875rem) and (max-width: 30rem) {
    font-size: 1.75rem;
    font-weight: 200;
    line-height: 2rem;
  }

  @media screen and (max-width: 26.875rem) {
    font-size: 1.75rem;
    font-weight: 100;
    line-height: normal;
  }
}

.banner__link {
  color: var(--color-banner-title-link);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.3125rem;
}

.banner__link.banner__link:focus,
.banner__link:hover {
  text-decoration: none;
  color: var(--color-banner-title-link-hover);
}
.banner__link.banner__link:focus-visible {
  outline: 0.125rem dashed var(--color-banner-title-link-hover);
  outline-offset: 0.125rem;
}