/** @component hero */
@import '../../settings/core';
@import '../../colors/settings';

.#{$namespace} {
  .hero {
    min-height: 30vh;
    padding: 4rem;
    padding-bottom: 5rem;
    margin-bottom: 1rem;
    color: $cui-black-100;
    text-align: center;
    background: center center/cover no-repeat;

    &__title {
      margin-bottom: 1rem;
    }

    &__lead {
      max-width: 60%;
    }

    &--dark {
      .hero__title,
      .hero__lead {
        color: $cui-white-100;
        text-shadow: 0 0 1px rgba($cui-black-100, 0.75);
      }
    }
  }
}