responsive gallery

gallery.css

ul#dribbble {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  @media (--above-m) {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100vw;    
  }

  & li {
    list-style-type: none;
    margin: 0 var(--u-s);

    @media (--above-m) {
      margin: 0 var(--u-xs) 0 0;
      max-width: 32vw;

      @nest &:nth-child(3n+3) {
        margin-right: 0;
      }
    }
  }
  
  & img {
    width: 100%;
    height: auto;
  }
}