/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

$tablet: 780px;
$mobile: 560px;


@mixin for-desktop {
	@media (min-width: #{$tablet}) {
	  @content;
	}
}

@mixin for-tablet {
	@media (min-width: #{$mobile}) and (max-width: #{tablet}) {
	  @content;
	}
}

@mixin for-mobile {
	@media (max-width: #{$mobile}) {
	  @content;
	}
}


.pm-items {
	display: flex;
	flex-wrap: wrap;
	> .item {
		flex: 1;
	}
	@include for-desktop(){
		@for $i from 1 through 6 {
			&[data-col="#{$i}"] {
				> .item {
					width: percentage( calc(  1 / $i ));
					flex-basis: percentage( calc(  1 / $i ));
				}
			}
		  }
	}
	@include for-tablet(){
		@for $i from 1 through 6 {
			&[data-tablet-col="#{$i}"] {
				> .item {
					width: percentage( calc(  1 / $i ));
					flex-basis: percentage( calc(  1 / $i ));
				}
			}
		  }
	}
	@include for-mobile(){
		@for $i from 1 through 6 {
			&[data-mobile-col="#{$i}"] {
				> .item {
					width: percentage( calc(  1 / $i ));
					flex-basis: percentage( calc(  1 / $i ));
				}
			}
		  }
	}
}