george-b
8/4/2017 - 2:32 PM

g-tiles.scss


.tile-row {
	font-size: 0;
	
	& + .tile-row {
		margin-top: 20px;
	}
}

.tile {
	padding: 20px;
	font-size: $base-font-size;
	width: 100%;
	display: inline-block;
	background: $white;
	
	@include bp(1024) {
		padding: 40px;
	}
	
	& + .tile {
		margin-top: 25px;
		
		@include bp(768) {
			margin: 0;
			border-left: 1px solid $grey;
		}
	}
}

.tile:first-child:nth-last-child(1) {
	width: 100%;
}

.tile:first-child:nth-last-child(2),
.tile:first-child:nth-last-child(2) ~ .tile {
	@include bp(768) {
		width: 50%;
	}
}

.tile:first-child:nth-last-child(3),
.tile:first-child:nth-last-child(3) ~ .tile {
	@include bp(768) {
		width: 33.3333%;
	}
}

.tile:first-child:nth-last-child(4),
.tile:first-child:nth-last-child(4) ~ .tile {
	@include bp(768) {
		width: 25%;
	}
}