/*------------------------------------------------------------------------------*/
/* Banner Cover Link
/*------------------------------------------------------------------------------*/
.BannerCoverLink {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

/*------------------------------------------------------------------------------*/
/* Banner Text
/*------------------------------------------------------------------------------*/
.BannerText {
  color: var(--color-text);
  font-size: var(--font-size-large);
  max-width: 60ch;
  position: relative;
  transition-duration: var(--transition-slow);
}

.BannerText p {
  font-size: clamp(var(--font-size-small), 3.5vw, var(--font-size-large));
}

.BannerText p:last-child {
  margin-bottom: 0;
}

/*------------------------------------------------------------------------------*/
/* Banner Light/Dark
/*------------------------------------------------------------------------------*/
.BannerText > * {
  transition-duration: 0ms;
}

.Banner-Dark .BannerText > * {
  color: var(--color-text-light-lighter);
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}

.Banner-Light .BannerText > * {
  color: var(--color-text-dark-darker);
  text-shadow: none;
}

/*------------------------------------------------------------------------------*/
/* Banner Text FOUC
/*------------------------------------------------------------------------------*/
.JS .FeaturedBanner .BannerText:not(.LightnessLoaded) > *,
.JS .MainBanner .BannerText:not(.LightnessLoaded) > * {
  color: transparent;
}

.JS .MainBanner .BannerText:not(.LightnessLoaded),
.JS .FeaturedBanner .BannerText:not(.LightnessLoaded) {
  opacity: 0;
}

/*------------------------------------------------------------------------------*/
/* Banner Button
/*------------------------------------------------------------------------------*/
.BannerText .Button {
  --background-color: var(--color-white);
  --border-color: var(--color-white);
  color: var(--color-text-dark);
  font-size: clamp(var(--font-size-small), 3.5vw, var(--font-size-large));
  min-height: 0;
  padding: clamp(0.5rem, 1vw, 1rem) clamp(0.5rem, 2vw, 1.5rem);
  text-shadow: none;
}

.BannerText .Button:hover {
  --background-color: var(--color-white-darker);
  color: var(--color-text-dark);
}

.BannerText .Button:active {
  --background-color: var(--color-white-darker);
  color: var(--color-text-dark);
}

/*------------------------------------------------------------------------------*/
/* Banner Front Page
/*------------------------------------------------------------------------------*/
.HeroBanners {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}
.HeroBanners img {
  width: 100%;
  height: 100%;
}
@media (max-width: 576px) {
  .HeroBanners {
    grid-template-columns: 100%;
  }
}

/*# sourceMappingURL=banner-base.css.map */