.magazine-title.head{
	text-align: center;
	margin-bottom:30px;
}
#portraits {
	display: grid;
	grid-template-columns:1fr 1fr 1fr;
	column-gap:7px;
	row-gap:7px;
	padding:0 20px;
}

.portrait{

	aspect-ratio:3/4.5;
	position: relative;
	padding:10px;
	box-sizing: border-box;
}
#portraits .image{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;


}
#portraits .portrait:hover .image.bw{
	opacity: 0;
}

#portraits .image.bw{
	z-index: 2;
	filter: grayscale(1);
	opacity: 1;
	transition:all 1s;

}
#portraits .image.color{
	z-index: 1;

}


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


	#portraits {
	grid-template-columns:1fr 1fr;
}

}


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

	#subnav a{
		margin:0 10px;
	}


}