.wrapper {
  min-height : 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-wrapper{
	display:flex;
	max-width:600px;
	flex-direction:column;
	background-color:rgba(255, 255, 255, 0.6);
	padding:10px;
}
.table{
	display:flex;
	flex-direction:column;
	margin-left:auto;
	margin-right:auto;
}
.tr{
	flex-direction:row;
}
@media (max-aspect-ratio:1/1){ // VERTICAL
	.table{
		display:flex;
		flex-direction:row;
	}
	.tr{
		flex-direction:column;
	}
	.preview-desc{
		width:300px;
	}
	.preview-row img{
		width:300px;
		height:300px;
	}
	.preview-links{
		width:300px;
		flex-direction:row;
	}
	.preview-row{
		flex-direction:column;
	}
}
@media (min-aspect-ratio: 1/1){ // LANDSCAPE
	.preview-desc{
		width:600px;
	}
	.preview-row img{
		width:400px;
		height:400px;
	}
	.preview-links{
		width:200px;
		flex-direction:column;
	}
	.preview-row{
		flex-direction:row;
	}
}
body{
	background-color:#fdd;
	padding:0px;
	font-family:arial;
}

.tr{
	flex-basis:auto;
	display:flex;
}
.td{
	width:100px;
	height:100px;
}
.icon-inactive{
	width:80px;
	height:80px;
	opacity:50%;
}
.icon-active{
	width:80px;
	height:80px;
}
.preview-row{
	display:flex;
}
.preview-links{
	display:flex;
	justify-content:space-between;
	margin:0;
	padding:0;
}
a{
	color:black;
}
.preview-links li:nth-child(1){
	background-color:rgba(150, 255, 150, 0.3);
}
.preview-links li:nth-child(2){
	background-color:rgba(255, 255, 150, 0.3);
}
.preview-links li:nth-child(3){
	background-color:rgba(255, 150, 150, 0.3);
}
.preview-links li{
	list-style-type:none;
	text-align:center;
	padding:10px;
	margin:0px;
}
.preview-desc{
	text-indent:30px;
}
h1{
	text-align:center;
	text-decoration:underline;
}