div#Portfolio {padding:10px}

div#Portfolio > * {position:relative; display:block; height:55vw; background-position:left top; background-size:cover}

div#Portfolio > * {margin:10px; flex-grow:1}

div#Portfolio > * {margin-bottom:20px}


div#Portfolio > *::after {position:absolute; background-color:rgba(0,0,0,0.2); top:-5px; left:-5px; right:-5px; bottom:-5px; content:''; color:white;
						  text-align:center; text-transform:capitalize; font-size:25px; font-weight:bold;
						  display:flex; justify-content:center; align-items:center; align-content:center;
}

div#Portfolio > *:hover::after {content:attr(data-name); background-color:rgba(0,0,0,0.4) }



@media screen and (min-width:415px) {
	div#Portfolio { display: flex; flex-wrap: wrap; }

		div#Portfolio > * { flex-basis: 34%; margin-bottom: 10px; height:25vw }
}

@media screen and (min-width:683px)
{
	div#Portfolio > * {flex-basis:26%; height:18vw}
}


@media screen and (min-width:1000px)
{
	div#Portfolio > * {flex-basis:calc((100vw - 119px) / 4); height:13vw}
}