.new-usp {
  &-container,
  &-bar,
  &-tile,
  &-message {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-container,
  &-bar {
    position: relative;
  }

  &-container {
    overflow: hidden;
    max-width: 1397px;
    margin: 0 auto;
    padding: 5px 0;
  }

  &-bar {
    flex-direction: row;
    max-width: 1130px;
    padding: 3px;
  }

  &-tile {
    flex-direction: column;
    min-width: 275px;
    background-color: $gray-bg;
    padding: 3px 0 10px;
    margin: 2px;
    text-decoration: none;
    min-height: 73px;

    &:hover {
      text-decoration: none;
    }

    &:hover .new-proposition-title {
      // sass-lint:disable no-important
      text-decoration: underline !important;
    }
  }

  &-message {
    flex-direction: column;
  }
}

.new-proposition {
  &-icon {
    color: $usp-icon-color;
    font-size: 1.25rem;
  }

  &-title {
    color: $blue;
    font-size: $font-size-base;
    font-weight: 500;
    line-height: 14px;
  }

  &-descr {
    @include additional-text;
    color: $gray-dark;
  }
}

.for-mobile {
  display: none;
}


@media (max-width: 1110px) {
  .new-usp {
    &-container,
    &-bar,
    &-tile {
      min-width: 100%;
      max-height: 100px;
    }

    &-container,
    &-tile {
      padding: 0;
    }

    &-bar {
      justify-content: left;
      padding: 5px 0;
    }

    &-tile {
      margin: 0;
      min-height: 78px;
    }
  }

  .for-mobile {
    display: flex;
  }

  .new-proposition-title {
    line-height: 17px;
  }
}

@media (max-width: 575px) {
  .new-usp {
    &-container,
    &-bar,
    &-tile {
      min-height: 48px;
    }

    &-tile {
      flex-direction: row;
    }

    &-message {
      align-items: initial;
      margin-left: 10px;
    }
  }
}