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

/* MAIN Content section */


.view-content{
	
	border: 1px dashed var(--toggle);
	max-width:1233px;
	height: auto;
	margin:auto;
	
	
}


.view-content-container {

	max-width:1233px;
	height: auto;
	margin:auto;
/*Toggle this border on and off as a guide*/
	/*border:1px dashed var(--toggle);*/
	align-content: center;	
	border: 3px solid white;
	border-radius: 20px;
	background-color:black;
		
}





/*WORKING GRID*/
.view-content-tile-container {
	display: grid;
	/* height: 500px; */

	/*overflow: scroll;*/
	justify-content: center;
	margin: auto;
	margin-top: 150px;
	list-style: none;
	border:1px dashed var(--toggle);
	Grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
	
	
	
}



/*ALT LAYOUT RESTRICTED TO MAX4 columnsGRID
.view-content-tile-container {
	display: flex;
	height: 500px;
	overflow-x: scroll;
	justify-content: center;
	margin: auto;
	margin-top: 150px;
	list-style: none;
	border:1px dashed var(--toggle);
	Grid-template-columns: repeat(4, 350px);
	grid-template-rows: repeat(auto-fit, minmax(350px, 1fr));
	
}
*/








.view-content-item-1{
	
	border:1px solid white;
	object-fit: cover;
	background-color:white;
	display:subgrid;
	grid-template-columns: 1fr 350px 1fr;
	grid-template-rows:1fr 350px 1fr;
	
	
	

	
}

.view-content-item-1:hover{
	/* animation: zoom 1s; */
	object-fit:cover;
}


.view-designs-title {
	
}


@keyframes zoom {
	from{ width: 100%; object-position:50% 50%;}
	to { width:120%; object-position: 50% 50%;}
}