.section-alternative-colourways, .section-style-with {
  .fabric-scroller {
    display: block;
    .collection-list {
        display: flex;

        .fabric-item {
          .card__media.media-hover-effect > picture:only-child img,
          .card-wrapper.media-hover-effect > picture:only-child img,
          .media.media--hover-effect > picture:only-child img {
            transition: transform var(--duration-long) ease;
          }

          .card-wrapper:hover .card__media.media-hover-effect > picture:only-child img,
          .card-wrapper:hover > picture:only-child img,
          .card-wrapper:hover .media.media--hover-effect > picture:only-child img {
            transform: scale(1.03);
          }
        }
    }
  }
}

@media screen and (max-width: 991px) {
  .section-alternative-colourways, .section-style-with {
    .fabric-scroller {
      overflow: auto;
      overflow-y: hidden;
      padding-left: 5%;
      padding-right: 5%;

      .collection-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: 40px;

        .fabric-item {
          flex: none;
          /*width: 40%;*/
          /*max-width: 40%;*/
          width: 30%;
          max-width: 30%;
        }
      }
    }
  }
}

@media screen and (max-width: 479px) {
  .section-alternative-colourways, .section-style-with {
    .fabric-scroller {
      .collection-list {
        --line-offset: 8px;
        column-gap: 16px;
        --new-grid-spacing: 16px;
        padding-bottom: 40px;
        
        .fabric-item {
          /*width: 70%;*/
          /*max-width: 70%;*/
          width: 60%;
          max-width: 60%;

          &:before {block-size: 52vh;}

          .card__media .media img {padding: 5%;}
        }
      }
    }
  }
}