@import './_variables.scss';

.jp-wordads-dashboard-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column nowrap;
	width: 100%;
	margin: 0 auto;
}

.jp-wordads-dashboard-row {
	display: grid;
	grid-gap: 24px;
	grid-template-columns: repeat( 4, 1fr );
	width: calc( 100% - 32px );
	margin: 0 16px;

	@include for-phone-up {
		grid-template-columns: repeat( 8, 1fr );
		width: calc( 100% - 36px );
		margin: 0 18px;
	}

	@include for-tablet-up {
		grid-template-columns: repeat( 12, 1fr );
		max-width: 1128px;
		width: calc( 100% - 48px );
		margin: 0 24px;
	}

	@for $i from 1 through 4 {
		.sm-col-span-#{$i} {
			grid-column-end: span #{$i};
		}
	}

	@include for-phone-up {
		@for $i from 1 through 8 {
			.md-col-span-#{$i} {
				grid-column-end: span #{$i};
			}
		}
	}

	@include for-tablet-up {
		@for $i from 1 through 12 {
			.lg-col-span-#{$i} {
				grid-column-end: span #{$i};
			}
		}
	}

	@include for-tablet-up {
		.lg-col-span-0 {
			display: none;
		}
	}

	@include for-tablet-down {
		.md-col-span-0 {
			display: none;
		}
	}

	@include for-phone-down {
		.sm-col-span-0 {
			display: none;
		}
		.sm-col-span-1 {
			display: block;
		}
	}
}
