/* Portfolio Section */

div#container section#portfolio {display:none;}
div#container section#portfolio main {display:grid; grid-template-columns:repeat(3,1fr); grid-gap:1rem;}
div#container section#portfolio main div.item {background-color:#0001; padding-top:75%; overflow:hidden; position:relative; transition:.5s;}
div#container section#portfolio main div.item {background-size:cover; background-position:center;}
div#container section#portfolio main div.item div.inner {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transform:translateY(-100%); transition:.5s;}
div#container section#portfolio main div.item div.inner {background-color:#333; color:#FFF; text-align:center; padding:1rem;}
div#container section#portfolio main div.item div.inner {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.5rem;}
div#container section#portfolio main div.item div.inner h3.name {font-weight:100; text-transform:uppercase; margin:0;}
div#container section#portfolio main div.item div.inner p.textcopy {font-size:.625rem; line-height:1.5; margin:0; /* margin-bottom:1rem; */}
div#container section#portfolio main div.item div.inner a.link {color:var(--blue); text-decoration:none;}


div#container section#portfolio main div.item:hover div.inner {transform:translateY(0);}



@media screen and (max-width:62rem) {
	div#container section#portfolio main {grid-template-columns:repeat(2,1fr);}
	/* div#container section#portfolio main div.item {height:12rem;} */
}

@media screen and (max-width:40rem) {
	div#container section#portfolio main {grid-template-columns:1fr;}
	/* div#container section#portfolio main div.item {height:8rem;} */
}

@media screen and (max-width:30rem) {
	/* div#container section#portfolio main div.item {height:4rem;} */
}