// Image Gallery
//
//  - Every `<img>` you add to your site needs to have an alt attribute. If the image is informational, set the `alt` equal to a *descriptive* alternative for that image.
//  - Avoid using generic strings like photo, image, or icon as `alt` values, as they don’t communicate valuable content to the user. Be as descriptive as possible.
//
// <blockquote>Note: we are using a randomly generated image filler so the `alt` text is not as descriptive as it could be...make your real images more descriptive!</blockquote>
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#image-gallery_guide">WCAG 2.1 Guidelines</a></h3><div id="image-gallery_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=131#text-equiv-all" target="_blank">1.1.1 Non-text Content</a> - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)<br><br><strong>Note:</strong> If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.</p></div><div class="markup"></div></section>
//
//
//
// Markup: image-gallery.twig
//
// Style guide: Media.image-gallery

// Import site utilities.
@import '../../global/utils/init';

.image-gallery {
  @include clearfix;
  position: relative;
  font-size: 0;
  flex-flow: row wrap;
  display: flex;
  padding: 0;

  @include breakpoint($bp-sm) {
    padding: 0.5vw;
  }

  .square {
    flex: auto;
    width: 100px;
    margin: 0.5vw;
    text-align: center;

    img {
      width: 100%;
      max-width: 100%;
      height: auto;
    }
  }
}
