// immagine singola
.fupl-type-img {

  .fupl-item {
    display: inline-block;
    max-width: 400px;
    height: auto;
  }

  &.fupl-multiple {
    .fupl-result {

      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 1.5rem;
      grid-gap: 1.5rem; // obsolete, mantained for compatibility

      .fupl-img-wrapper {
        width: 100%;
        height: 140px;
        padding: 4px;
        text-align: center;
        background: $fupl-img-background-color;

        img { /* stylelint-disable-line max-nesting-depth */
          width: auto;
          max-width: 100%;
          height: auto;
          max-height: 100%;
        }
      }

      @include fupl-media-query-min(sm) {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        .fupl-img-wrapper { /* stylelint-disable-line max-nesting-depth */
          height: 180px;
        }
      }
      @include fupl-media-query-min(md) {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        .fupl-img-wrapper { /* stylelint-disable-line max-nesting-depth */
          height: 200px;
        }
      }
      // @include fupl-media-query-min(lg) {
      //   grid-template-columns: repeat(4, minmax(160px, 1fr));
      // }
      @include fupl-media-query-min(xl) {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      }

      .fupl-item {
        max-width: 100%;
        height: auto;
      }
    }
  }
}