@use "../../../styles/tools/generate";
@use "./mixins";
@use "./config";

@layer components {
  .hero {
    @include mixins.base;

    &__content {
      @include mixins.content;
    }

    &__description {
      @include mixins.description;
    }

    &__sticker {
      @include mixins.sticker;
    }

    &__image-wrapper {
      @include mixins.image-wrapper;
    }

    &__image {
      @include mixins.image;

      &--single {
        @include mixins.image-single;
      }

      &--fullwidth {
        @include mixins.image-fullwidth;
      }

      &--gradient {
        @include mixins.gradient-overlay;

        &-halfwidth {
          @include mixins.gradient-overlay-halfwidth;
        }
      }
    }
  }
}