@charset "utf-8";
/* CSS Document */


/* desktop screen sizes  */

.properties {
	float : left;
	display: grid;
	grid-template-columns: repeat(4, auto);
	grid-template-rows: repeat(4, auto);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

/* adjust for mobile */
@media only screen and (max-width: 600px) {
  	.properties {
	  	grid-template-columns: repeat(2, auto);
	  	grid-template-rows: repeat(8, auto);
 	 }
}

.properties img { width: 100% }

.p01 { grid-area: 1 / 1 / 2 / 2 }
.p02 { grid-area: 1 / 2 / 2 / 3 }
.p03 { grid-area: 1 / 3 / 2 / 4 }
.p04 { grid-area: 1 / 4 / 2 / 5 }
.p05 { grid-area: 2 / 1 / 3 / 2 }
.p06 { grid-area: 2 / 2 / 3 / 3 }
.p07 { grid-area: 2 / 3 / 3 / 4 }
.p08 { grid-area: 2 / 4 / 3 / 5 }
.p09 { grid-area: 3 / 1 / 4 / 2 }
.p10 { grid-area: 3 / 2 / 4 / 3 }
.p11 { grid-area: 3 / 3 / 4 / 4 }
.p12 { grid-area: 3 / 4 / 4 / 5 }
.p13 { grid-area: 4 / 1 / 5 / 2 }
.p14 { grid-area: 4 / 2 / 5 / 3 }
.p15 { grid-area: 4 / 3 / 5 / 4 }
.p16 { grid-area: 4 / 4 / 5 / 5 }

/* adjust for mobile screen */
@media only screen and (max-width: 600px) {
	.p01 { grid-area: 1 / 1 / 2 / 2 }
	.p02 { grid-area: 1 / 2 / 2 / 3 }
	.p03 { grid-area: 2 / 1 / 3 / 2 }
	.p04 { grid-area: 2 / 2 / 3 / 3 }
	.p05 { grid-area: 3 / 1 / 4 / 2 }
	.p06 { grid-area: 3 / 2 / 4 / 3 }
	.p07 { grid-area: 4 / 1 / 5 / 2 }
	.p08 { grid-area: 4 / 2 / 5 / 3 }
	.p09 { grid-area: 5 / 1 / 6 / 2 }
	.p10 { grid-area: 5 / 2 / 6 / 3 }
	.p11 { grid-area: 6 / 1 / 7 / 2 }
	.p12 { grid-area: 6 / 2 / 7 / 3 }
	.p13 { grid-area: 7 / 1 / 8 / 2 }
	.p14 { grid-area: 7 / 2 / 8 / 3 }
	.p15 { grid-area: 8 / 1 / 9 / 2 }
	.p16 { grid-area: 8 / 2 / 9 / 3 }
}

.p01, .p02, .p03, .p04, 
.p05, .p06, .p07, .p08,
.p09, .p10, .p11, .p12,
.p13, .p14, .p15, .p16 {
	display: inline-block;
}

.hover-image {text-decoration: none}
.hide {display:none}
.hover-image:hover img:first-child {display:none}
.hover-image:hover img:last-child {display:inline-block}