/* SASS */
/********/
/*

.mp-gallery {
	
	&.normal {
		display: flex;
		flex-wrap: wrap;
	}
	
	display: inline-block;
	width: 100%;
	clear: both;
	margin-left: -5px;
    margin-right: -5px;
	
  figure {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 5px;
    
    > a > img {
      width: 100%;
      box-sizing: border-box;
    }
    
  }
  
  @for $i from 1 through 10 {
    $width: percentage(1 / $i);
  
      &.cols-#{$i} {
          > figure {
            width: $width;
          }
      }
     
      
  }
  
 
}

@media screen and (max-width: 800px){
  .mp-gallery {
    @for $i from 1 through 10 {
      $width: percentage(1 / $i);
     
      &.cols-mobile-#{$i} {
          > figure {
            width: $width;
          }
      }
      
    }
  }
}





*/

/* reset */




/*********/
/** css **/

.mp-gallery {
  display: inline-block;
  width: 100%;
  clear: both;
  margin-left: -5px;
  margin-right: -5px;
}
.mp-gallery.normal {
  display: flex;
  flex-wrap: wrap;
}
.mp-gallery figure {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 5px;
}
.mp-gallery figure > a > img {
  width: 100%;
  box-sizing: border-box;
}
.mp-gallery.cols-1 > figure {
  width: 100%;
}
.mp-gallery.cols-2 > figure {
  width: 50%;
}
.mp-gallery.cols-3 > figure {
  width: 33.33333333%;
}
.mp-gallery.cols-4 > figure {
  width: 25%;
}
.mp-gallery.cols-5 > figure {
  width: 20%;
}
.mp-gallery.cols-6 > figure {
  width: 16.66666667%;
}
.mp-gallery.cols-7 > figure {
  width: 14.28571429%;
}
.mp-gallery.cols-8 > figure {
  width: 12.5%;
}
.mp-gallery.cols-9 > figure {
  width: 11.11111111%;
}
.mp-gallery.cols-10 > figure {
  width: 10%;
}

@media screen and (max-width: 800px) {
  .mp-gallery.cols-mobile-1 > figure {
    width: 100%;
  }
  .mp-gallery.cols-mobile-2 > figure {
    width: 50%;
  }
  .mp-gallery.cols-mobile-3 > figure {
    width: 33.33333333%;
  }
  .mp-gallery.cols-mobile-4 > figure {
    width: 25%;
  }
  .mp-gallery.cols-mobile-5 > figure {
    width: 20%;
  }
  .mp-gallery.cols-mobile-6 > figure {
    width: 16.66666667%;
  }
  .mp-gallery.cols-mobile-7 > figure {
    width: 14.28571429%;
  }
  .mp-gallery.cols-mobile-8 > figure {
    width: 12.5%;
  }
  .mp-gallery.cols-mobile-9 > figure {
    width: 11.11111111%;
  }
  .mp-gallery.cols-mobile-10 > figure {
    width: 10%;
  }
}