Untitled

<style lang="scss" is:global>
  @use "../../styles/theme.scss" as *;
  @include view-large-desktop() {
    .badges-container {
      display: flex;
      position: relative;
      justify-content: center;
      width: $viewLargeDesktop;
      a {
        color: white;
      }
      &__image {
        display: block;
        width: $viewLargeDesktop;
      }
      &__logos {
        display: flex;
        position: absolute;
        top: 0;
        flex-direction: row;
        justify-content: space-around;
        width: 90%;
        padding: 25px 0;
      }
      &__disclaimers {
        display: flex;
        position: absolute;
        bottom: 15px;
        flex-direction: column;
        align-items: center;
        width: auto;
        color: $white;
        font-size: 12px;
        font-family: $hurmeGeometricSans1SemiBold;
        .disclaimers__text {
          display: block;
          width: 100%;
        }
      }
    }
  }

  @include view-desktop() {
    .badges-container {
      width: $viewDesktop;
      &__image {
        width: $viewDesktop;
      }
    }
  }

  @include view-mobile() {
    .badges-container {
      display: flex;
      position: relative;
      justify-content: center;
      width: 100%;
      a {
        color: white;
      }
      &__wrapper {
        width: 100%;
      }
      &__image {
        display: block;
        width: 100%;
        height: 490px;
        @include responsive(mobile) {
          height: 490px;
        }
        @include responsive(tablet) {
          height: 400px;
        }
        @include responsive(tab-port) {
          height: 380px;
        }
        @include responsive(desktop) {
          height: auto;
        }
        &--wider {
          height: 600px;
          @include responsive(mobile) {
            height: 490px;
          }
          @include responsive(tablet) {
            height: 400px;
          }
          @include responsive(tab-port) {
            height: 340px;
          }
          @include responsive(desktop) {
            height: 220px;
          }
        }
      }
      &__logos {
        display: flex;
        position: absolute;
        top: 0;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        width: 75%;
        padding: 25px 0;
        @include responsive(tablet) {
          width: 78%;
        }
        @include responsive(tab-port) {
          width: 62%;
        }
        @include responsive(desktop) {
          flex-direction: row;
          justify-content: space-around;
          width: 90%;
        }

        .container-logos__img {
          width: 100%;
          padding: 10px 15px;
          @include responsive(tablet) {
            padding: 0 15px;
          }
          @include responsive(desktop) {
            padding: 0;
            height: 80px;
          }
          &--small {
            @include responsive(desktop) {
            padding: 0;
            height: 60px;
          }
        }
      }
      &__disclaimers {
        display: flex;
        position: absolute;
        bottom: 5px;
        left: 20px;
        flex-direction: column;
        width: auto;
        color: $white;
        font-size: 10px;
        font-family: $hurmeGeometricSans1SemiBold;
        @include responsive(desktop) {
          bottom: 15px;
          left: auto;
          align-items: center;
          font-size: 12px;
        }
        .disclaimers__text {
          display: block;
          width: 90%;
          @include responsive(desktop) {
            width: 81%;
          }
          &--small {
            width: 70%;
            @include responsive(desktop) {
              width: 81%;
            }
          }
        }
      }
    }
  }
</style>