.block-hero {
  inline-size: 100%;
  background-color: $color-white;
  padding: 0;

  &__basic {
    display: grid;
    padding-top: $spacing-big;
    row-gap: $spacing-xl;

    figure {
      position: relative;
      height: 380px;      
      margin-left: negative(var(--gutter));
      margin-right: negative(var(--gutter));

      @include media-up(lg) {
        height: auto;
        min-height: 380px;
        aspect-ratio: 1024 / 380;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      figcaption {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: $spacing-xs;
        color: $color-white;
        opacity: 1;
      }
    }
  }

  &__advanced {
    &-content {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      height: auto;
      min-height: 480px;
      padding-top: $spacing-lg;
      padding-bottom: calc($spacing-lg + $spacing-xl);
      gap: $spacing-xsm $spacing-lg;
      align-items: end;
      align-content: end;
      justify-content: space-between;

      @include media-up(lg) {
        min-height: auto;
        aspect-ratio: 1024 / 480;
      }

      &.auto-height {
        min-height: auto;
        aspect-ratio: auto;
      }

      figure {
        display: contents;

        img {
          position: absolute;
          left: -100%;
          right: -100%;
          top: 0;
          width: 100vw;
          max-width: 1920px;
          height: 100%;
          margin: auto;
          object-fit: cover;
        }

        figcaption {
          position: absolute;
          bottom: $spacing-xl;
          right: 0;
          padding: $spacing-xs;
          color: $color-white;
          opacity: 1;
        }
      }

      &-info {
        display: grid;
        flex: 1;
        width: 100%;
        max-width: $width-lg;
        color: $color-white;
        align-content: end;
        row-gap: $spacing-xsm;
        z-index: 1;

        &.color-black {
          color: $color-black;
        }

        @include media-down(lg) {
          flex: auto;
        }
      }

      &-cta {
        z-index: 1;

        &.color-black {
          // border: 1px solid $color-black;
        }
      }

      &.auto-height {
        padding-top: multiple(25);
        padding-bottom: multiple(25);
      }
    }

    &-box-links {
      position: relative;
      display: flex;
      
      padding: $spacing-xxxl;
      margin-top: -$spacing-xl;
      gap: $spacing-sm;

      @include media-down(xl) {
        flex-wrap: wrap;
        padding: $spacing-lg;
      }

      &-title {
        width: 33.33%;

        @include media-down(xl) {
          width: 100%;
        }
      }

      &-list {
        display: flex;
        flex-wrap: wrap;
        width: 66.66%;
        gap: $spacing-sm;

        @include media-down(xl) {
          width: 100%;
        }

        li {
          width: calc(50% - $spacing-xs);

          @include media-down(md) {
            width: 100%;
          }
        }
      }
    }
  }
}