[Summary view] [Print] [Text view]

   1  .gallery {
   2      display: flex;
   3      flex-flow: row wrap;
   4      justify-content: center;
   5      margin-bottom: calc(1.5 * #{$size__spacing-unit});
   6  }
   7  
   8  .gallery-item {
   9      display: inline-block;
  10      margin-right: 16px;
  11      margin-bottom: 16px;
  12      text-align: center;
  13      vertical-align: top;
  14      width: 100%;
  15  
  16      // Loops to enumerate the classes for gallery columns.
  17      @for $i from 2 through 9 {
  18          .gallery-columns-#{$i} & {
  19              max-width: calc((100% - 16px * #{ $i - 1 }) / #{ $i });
  20  
  21              &:nth-of-type(#{$i}n+#{$i}) {
  22                  margin-right: 0;
  23              }
  24          }
  25      }
  26  
  27      &:last-of-type {
  28          padding-right: 0;
  29      }
  30  }
  31  
  32  .gallery-caption {
  33      display: block;
  34      font-size: $font__size-xs;
  35      @include font-family( $font__heading );
  36      line-height: $font__line-height-pre;
  37      margin: 0;
  38      padding: ( $size__spacing-unit * .5 );
  39  }
  40  
  41  .gallery-item > div > a {
  42      display: block;
  43      line-height: 0;
  44  
  45      // Accessibility
  46      box-shadow: 0 0 0 0 transparent;
  47  
  48      &:focus {
  49          box-shadow: 0 0 0 2px rgba( $color__link, 1 );
  50      }
  51  }
  52