.payment-item-thepay20 {
   $text-dark: $black !default;

   .img img {
      @supports (object-fit: contain) {
         height: 50px !important;
         object-fit: contain;
      }
   }

   .payments-list {
      padding-top: .5rem;
      padding-bottom: .5rem;

      p {
         margin: 0;
      }

      strong {
         color: $text-dark;
         display: block;
      }
   }

   .payment-item-small {
      max-width: 76px !important;
      padding: 8px;
      width: 33.333%;

      @supports (object-fit: contain) {
         max-height: 60px !important;
         object-fit: contain;
      }
   }

   .payment-logos {
      display: flex;
      align-items: center;
      flex: 1;
      overflow: hidden;
   }

   .more {
      color: $text-dark;
      text-align: center;
   }

   @media screen and (max-width: $sm - 1) and (min-width: $xs) {
      .payment-item-small {
         width: 50%;

         &:nth-child(3) {
            display: none;
         }
      }
   }

   @media screen and (max-width: $xs - 1) {
      .payments-list {
         flex-wrap: wrap;
      }

      .payment-logos {
         width: calc(100% - 130px);
         flex: auto;
      }

      @supports (object-fit: contain) {
         .img img {
            height: auto !important;
            max-height: 36px;
         }
      }
   }
}
