.block-card-double {
  inline-size: 100%;
  background-color: $color-white;

  &__content {
    display: flex;

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

    .card {
      flex: 1 0 0;
      position: relative;
      display: flex;
      height: auto;
      min-height: 500px;
      padding: $spacing-xxxl $spacing-lg $spacing-xxl;
      align-items: end;

      @include media-down(lg) {
        min-height: 450px;
        padding: $spacing-lg;
      }

      &-img {
        position: absolute;
        top: 0;
        left: -100vw;
        right: -100vw;
        width: 100vw;
        height: 100%;
        max-width: 1920px;
        margin: auto;
        background-color: $color-black;
        z-index: 0;

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

        figcaption {
          display: none;
        }
      }

      &-txt {
        color: $color-white;
        z-index: 1;

        .btn-link-mono {
          &:hover {
            text-decoration-color: $color-white;
          }
        }
      }

      + .card {
        @include media-up(lg) {
          margin-left: -1px;
          border-left: 1px solid $color-white;
        }

        @include media-down(lg) {
          border-top: 1px solid $color-white;
        }
      }
    }

    @include media-up(lg) {
      &:has(.card:nth-child(2)) {
        .card {
          &-img {
            width: 50vw;
            max-width: calc(1920px / 2);
            left: initial;
            right: initial;
          }

          &:first-child {
            .card-img {
              right: 0;
            }
          }        

          &:last-child {
            .card-img {
              left: 0;
            }
          }
        }
      }
    }
  }
}