#handcrafts{
	height: 33vh;
	background-image: url("../../images/handcrafts/zendu-silk-paralax.jpg");
}

#handcrafts h2{
	font-size: 5rem;
}


main p{
	max-width: 1150px;
	margin: auto;
	font-size: 1.2rem;
	font-family: 'Work Sans', sans-serif;
	text-align: justify;
	color: #53473B;
	padding: 1rem;
}



.mosaic{
	max-width: 1100px;
	height: 100%;
	margin: 4rem auto 0rem auto;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(23, 65px);
	grid-gap: 1.5rem;
	padding: 3rem;
}

.mosaic .mosaic-item{
	cursor: pointer;
	transition: opacity .5s, transform .5s;
}

.mosaic .mosaic-item img{
	width: 100%;
    height: 100%;
	object-fit: cover;
}

.mosaic .mosaic-item:hover{
	opacity: .75;
	transform: scale(1.01);
}

.mosaic .mosaic-item img:hover{
	box-shadow: 2px 3px 4px rgba(0, 0, 0, .5);
}



.mosaic #item1{
	grid-column: 1/9;
	grid-row: 1/5;
}

.mosaic #item2{
	grid-column: 9/13;
	grid-row: 1/3;
}

.mosaic #item3{
	grid-column: 9/13;
	grid-row: 3/5;
}

.mosaic #item4{
	grid-column: 1/8;
	grid-row: 5/9;
}

.mosaic #item5{
	grid-column: 8/13;
	grid-row: 5/9;
}

.mosaic #item6{
	grid-column: 1/6;
	grid-row: 9/13;
}

.mosaic #item7{
	grid-column: 6/13;
	grid-row: 9/13;
}

.mosaic #item8{
	grid-column: 1/9;
	grid-row: 13/17;
}

.mosaic #item9{
	grid-column: 9/13;
	grid-row: 13/17;
}

.mosaic #item10{
	grid-column: 7/13;
	grid-row: 17/22;
}

.mosaic #item11{
	grid-column: 1/7;
	grid-row: 17/22;
}








@media screen and (max-width: 650px){

	main .content-subtitle{
		margin: 2rem auto;
	}

	.mosaic{
		padding: 1.5rem;
		grid-gap: .5rem;
		margin: 2rem auto;
	}

	.mosaic #item1, .mosaic #item3,
	.mosaic #item5, .mosaic #item7,
	.mosaic #item2, .mosaic #item4,
	.mosaic #item6 { grid-column: span 6; grid-row: span 3; }

	#handcrafts h2{
		font-size: 4rem;
	}
	
	
	main p{
		font-size: 1rem;
		
	}


}

@media screen and (max-width: 450px){

	#handcrafts h2{
		font-size: 3rem;
		line-height: 3.5rem;
	}

	.mosaic{
		grid-template-rows: auto;
	}

	.mosaic #item1, .mosaic #item3,
	.mosaic #item5, .mosaic #item7,
	.mosaic #item2, .mosaic #item4,
	.mosaic #item6 { grid-column: span 12; grid-row: span 3; }
}