@use '@material/image-list/mixins' as image-list-mixins;

.page-containment_image-list {
  .hero-image-list {
    @include image-list-mixins.standard-columns(5);
    width: 300px;
    margin: 0;

    .mdc-image-list__image {
      background-color: #000;
    }
  }

  .standard-image-list {
    @include image-list-mixins.aspect(1.5); // Images are 3:2
    @include image-list-mixins.standard-columns(5);
    max-width: 1000px;
  }

  .masonry-image-list {
    @include image-list-mixins.masonry-columns(5);
    max-width: 1000px;
  }

  .hide-supporting .mdc-image-list__supporting {
    display: none;
  }

  .rounded-corners {
    @include image-list-mixins.shape-radius(8px);
  }

  @media (max-width: 599px) {
    .standard-image-list {
      @include image-list-mixins.standard-columns(3);
    }

    .masonry-image-list {
      @include image-list-mixins.masonry-columns(3);
    }
  }
}
