// viewport s - m
@include viewport--l('inversed') {
  .secondary-search .banner__media {
    // padding: $spacing--l 50px 0;

    img {
      object-fit: unset;
    }
  }

  .secondary-search .form-groups--row {
    display: flex;
    flex-direction: column;

    & button {
      order: 4;
      width: 100%;
    }

    & .content-block__form.form-group__input {
      margin-bottom: $spacing--xs;
      margin-top: $spacing--s;
      order: 3;
    }
  }
}

// viewport l
@include viewport--l {
  .secondary-search {
    .banner {
      &__wrapper {
        position: relative;
      }

      &__media {
        height: 100%;
        position: absolute;
        right: $grid-margin--l;
        width: grid-columns(4, 12);
      }

      &__content {
        width: grid-columns(10, 12);
      }
    }
    & .form-groups--row {
      flex-wrap: wrap;

      & button {
        order: 3;
      }

      & .form-group__input {
        order: 4;
        width: 100%;
      }
    }
  }
}

// viewport xl
@include viewport--xl {
  .secondary-search {
    .banner {
      &__wrapper {
        position: static;
      }

      &__media {
        height: auto;
        position: static;
        width: grid-columns(4, 12);
      }

      &__content {
        width: $secondary-search-banner-content-width--xl;
      }
    }
  }
}

// viewport l - secondary search large, used for 3 input fields
@include viewport--l {
  .secondary-search--l {
    .banner {
      &__content {
        width: grid-columns(10, 12);
      }

      &__media {
        display: none;
      }
    }
  }
}

// background mappings
@include secondary-search-background-mapping;