.portfolio{background-color:var(--title-color)}.portfolio>.container{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.portfolio-card{aspect-ratio:1;background-color:#000;width:100%;margin:0 auto;display:block;position:relative;overflow:hidden}.imagen{object-fit:cover;width:100%;height:100%;display:block}.portfolio-card-info{width:100%;height:100%;color:var(--white-color);opacity:0;pointer-events:none;background-color:#2c2c2ce6;padding:1rem;transition:all .5s ease-in-out;position:absolute;top:0;left:0}.portfolio-card:hover .portfolio-card-info{opacity:1;pointer-events:auto}.portfolio-card-info>div{color:var(--white-color);border:thin solid var(--white-color);width:100%;height:100%;padding:1rem}@media screen and (min-width:768px){.portfolio>.container{grid-template-columns:repeat(2,50%);gap:1rem;display:grid}.portfolio .section-title{grid-column:span 2}.portfolio-modal{flex-direction:row;max-width:800px}.portfolio-info{align-self:center;margin-left:1rem}}@media screen and (min-width:1024px){.portfolio>.container{grid-template-columns:repeat(3,1fr);gap:1rem}.portfolio .section-title{grid-column:span 3}}
.contact-card{color:var(--second-color);background-color:var(--gray-dark-color);border-radius:.5rem;flex-direction:column;justify-content:space-around;align-items:center;width:100%;height:144px;margin:1rem auto;padding:1rem;display:flex}.contact-card>svg{width:2rem;height:2rem;fill:var(--first-color)}.contact-card>small{margin-top:-1rem}.social-media a{padding:0 .4rem;text-decoration:none}.social-media svg{width:2rem;height:2rem}.contact-form{background-color:var(--gray-dark-color);border-radius:.5rem;max-width:800px;margin:2rem auto;padding:1rem}.contact-form>*{width:100%;margin:1rem auto;padding:.5rem;display:block}.contact-form input,.contact-form textarea{font-size:.85rem;font-family:var(--font)}.contact-form input{border:0;border-bottom:thin solid var(--gray-dark-color);padding-left:0}.contact-form textarea{border:thin solid var(--gray-dark-color);resize:none}.contact-form input[type=submit]{cursor:pointer;margin-top:0;transition:all .5s ease-out}.contact-form input[type=submit]:hover{opacity:.75}.contact-form ::placeholder{color:var(--black-alpha-color)}.contact-form-response{text-align:center;background-color:var(--white-color);width:400px;padding:1rem}.contact-form-response svg{width:4rem;height:4rem;fill:var(--first-color);margin-top:2rem}.modal#gracias:target{opacity:1;pointer-events:auto}@media screen and (min-width:1024px){.contacto{width:100%;min-height:87vh}.contact-form{grid-template-columns:repeat(2,1fr);column-gap:1rem;display:grid}.contact-form input,.contact-form textarea{font-size:1rem}.contact-form textarea,.contact-form-loader{grid-column:span 2}.contact-form input[type=submit]{margin-left:0}}.modal{z-index:999;background-color:var(--black-alpha-color);opacity:0;pointer-events:none;justify-content:center;align-items:center;transition:all 1s;display:flex;position:fixed;inset:0}.modal-content{position:relative}.modal-close{position:absolute;top:1rem;right:1rem}.modal-close svg{width:3rem;height:3rem;fill:var(--first-color)}.modal[id|=trabajo]:target{opacity:1;pointer-events:auto}@media screen and (min-width:768px){.contact-cards{grid-template-columns:repeat(2,48%);justify-content:space-between;display:grid}}@media screen and (min-width:1024px){.contact-cards{grid-template-columns:repeat(4,24%)}}