/**
 * EdGEL hero panels, not the same as Bootstrap cards.
 */

@use "../settings" as *;
@use "../tools" as *;
@use "card";

.hero {
  @extend .card;
}

.hero-bg {
  background-image: none;
  background-position: center;
  background-size: cover;
}

.hero-title {
  margin-bottom: space(3);
  @include font-size($h1-font-size);
}

.hero-content {
  padding: $hero-padding;
  @include font-size($font-size-lg);
}

.hero-content-left,
.hero-content-right {
  @include media-breakpoint-up(sm) {
    width: 50%;
  }
}

.hero-content-left {
  margin-right: auto;
}

.hero-content-right {
  margin-left: auto;
}

.hero-content-dark,
.hero-content-dark-opaque {
  color: $white;
  a:not(.btn) {
    --#{$prefix}link-color-rgb: #{to-rgb($hero-dark-link)};
    --#{$prefix}link-hover-color-rgb: #{to-rgb($white)};
  }
}

.hero-content-dark-opaque {
  background-color: $dark;
}

.hero-content-dark {
  background-color: rgba($dark, .75);
}

.hero-content-light-opaque {
  background-color: $white;
}

.hero-content-light {
  background-color: rgba($white, .75);
}

.hero-content-brand,
.hero-content-brand-opaque {
  @include edgel-brand-bg();
}

.hero-content-brand {
  background-color: rgba($brand-color, .75);
}