*{
	box-sizing: border-box;
	font-family: 'Roboto Mono', monospace;
}
body{
	width:100%;
	height: 100vh;
	background-color: #353535;
    display: grid;
    grid-template-columns: repeat(24, 1fr [col-start]);
    grid-template-rows: repeat(13, 1fr [col-start]);
    padding: 4%;

}


 img {

	width: 100%;
	height: 100%;
	object-fit: contain; 
} 




#one {
grid-column: 1/5;
grid-row: 1/7;
background-color: black;


/* background-image: url("../images/1.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position: center; */
}


#two{
grid-column: 1/5;
grid-row: 8/14;
background-color: black;

/* background-image: url("../images/2.jpg");
background-size: 90%;
background-repeat: no-repeat;
background-position: center; */
}

#three{
grid-column: 6/14;
grid-row: 1/8;
background-color: black;

/* background-image: url("../images/3.jpg");
background-size: 85%;
background-repeat: no-repeat;
background-position: center; */
}

#four{
grid-column: 6/9;
grid-row: 9/14;
background-color: black;

/* background-image: url("../images/4.jpg");
background-size: 110%;
background-repeat: no-repeat;
background-position: center; */
}

#five{
grid-column: 10/14;
grid-row: 9/14;
background-color: black;

/* background-image: url("../images/5.jpg");
background-size: 85%;
background-repeat: no-repeat;
background-position: center; */
}

#six{
grid-column: 15/19;
grid-row: 1/5;
background-color: black;

/* background-image: url("../images/7.jpg");
background-size: 90%;
background-repeat: no-repeat;
background-position: center; */
}

#seven{
grid-column: 15/19;
grid-row: 6/10;
background-color: black;

/* background-image: url("../images/6.jpg");
background-size: 85%;
background-repeat: no-repeat;
background-position: center; */
}

#eight{
grid-column: 15/19;
grid-row: 11/14;
background-color: black;

/* background-image: url("../images/8.jpg");
background-size: 130%;
background-repeat: no-repeat;
background-position: center; */
}

#nine{
grid-column: 20/25;
grid-row: 1/8;
background-color: black;

/* background-image: url("../images/9.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position: center; */
}

#ten{
grid-column: 20/25;
grid-row: 9/14;
background-color: black;

/* background-image: url("../images/10.jpg");
background-size: 95%;
background-repeat: no-repeat;
background-position: center; */
}

/*
img {
  opacity: 0.1;
}

img:hover {
  opacity: 1.0;
} */