.mosaic {
	width: 100%;
	/* height: 650px; */
	margin: 4rem 0 0 0;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	 /* grid-template-rows: repeat(13, 1fr); */
	grid-template-rows: repeat(24, 50px);
	gap: 15px;
}




.mosaic div:nth-child(1)  {grid-column: 1/4; grid-row: 1/3;}
.mosaic div:nth-child(2)  {grid-column: 1/4; grid-row: 3/5;}
.mosaic div:nth-child(3)  {grid-column: 1/3; grid-row: 5/8;}
.mosaic div:nth-child(4)  {grid-column: 1/3; grid-row: 8/11;}
.mosaic div:nth-child(5)  {grid-column: 1/3; grid-row: 11/14;}

.mosaic div:nth-child(6)  {grid-column: 4/6; grid-row: 1/5;}
.mosaic div:nth-child(7)  {grid-column: 3/6; grid-row: 5/9;}
.mosaic div:nth-child(8)  {grid-column: 3/5; grid-row: 9/12;}   .mosaic div:nth-child(19)  {grid-column: 5/7; grid-row: 9/12;}
.mosaic div:nth-child(9)  {grid-column: 3/6; grid-row: 12/14;}

.mosaic div:nth-child(10) {grid-column: 6/9; grid-row: 1/3;}
.mosaic div:nth-child(11) {grid-column: 6/9; grid-row: 3/6;}
.mosaic div:nth-child(12) {grid-column: 6/9; grid-row: 6/9;}
.mosaic div:nth-child(13) {grid-column: 7/9; grid-row: 9/12;}
.mosaic div:nth-child(14) {grid-column: 6/9; grid-row: 12/14;}

.mosaic div:nth-child(15) {grid-column: 9/11; grid-row: 1/5}
.mosaic div:nth-child(16) {grid-column: 9/11; grid-row: 5/8;}
.mosaic div:nth-child(17) {grid-column: 9/11; grid-row: 8/11;}
.mosaic div:nth-child(18) {grid-column: 9/11; grid-row: 11/14;}


.mosaic div:nth-child(20) {grid-column: 1/4;  grid-row: 14/17;}
.mosaic div:nth-child(21) {grid-column: 4/8;  grid-row: 14/16;}
.mosaic div:nth-child(22) {grid-column: 8/11; grid-row: 14/18;}

.mosaic div:nth-child(23) {grid-column: 1/4; grid-row: 17/19;}
.mosaic div:nth-child(24) {grid-column: 4/6; grid-row: 16/19;}
.mosaic div:nth-child(25) {grid-column: 6/8; grid-row: 16/19;}
.mosaic div:nth-child(26) {grid-column: 8/11; grid-row: 18/20;}

.mosaic div:nth-child(27) {grid-column: 1/3; grid-row: 19/22;}
.mosaic div:nth-child(28) {grid-column: 3/5; grid-row: 19/22;}
.mosaic div:nth-child(29) {grid-column: 5/8; grid-row: 19/22;}
.mosaic div:nth-child(30) {grid-column: 8/11; grid-row: 20/22;}



.mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 10px solid white;
	box-shadow: 0px 0px 13px -2px rgba(0,0,0,0.8);
	transition: all 200ms ease-in;
}

.mosaic img:hover {
	border: 10px solid var(--gold);
	transform: scale(1.3);
	box-shadow: 0px 0px 24px 2px rgba(0,0,0,0.3);
}




@media(max-width: 1050px) {
	.mosaic {
		grid-template-rows: repeat(24, 25px);
		gap: 8px;
	}
	.mosaic img {
		border: 5px solid white;
	}
}