.portfolio-page{display:flex;flex-direction:column;gap:35rem;margin-top:34rem;margin-bottom:35rem;position:relative}.portfolio-page-svg{display:block;position:absolute;background:url(/img/portfolio-page.svg) top right no-repeat;background-size:contain;height:30rem;width:82rem;top:30rem;right:0}.portfolio-item{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:58rem;font-size:1.6rem;font-weight:700}.portfolio-preview{order:2;overflow:hidden}.portfolio-preview img{height:100%;width:100%;object-fit:cover}.portfolio-data{display:grid;grid-template-rows:1fr 1fr 5rem;padding-right:1rem}.portfolio-stack div{margin-right:10px;margin-bottom:10px;display:inline-flex;border:.14em solid var(--font-color);border-radius:1em;justify-content:center;align-items:center;text-transform:uppercase;color:var(--font-accent-color);padding:.4em}.portfolio-description{align-self:end}.portfolio-links{align-self:end;font-weight:600}.portfolio-links a:nth-child(2){border-left:.15em solid var(--font-color);margin-left:.3em;padding-left:.3em}.portfolio-be:after{content:"";display:inline-block;width:.8em;height:.8em;border:.2em solid var(--font-accent-color);border-radius:100%;margin-left:.3em}.portfolio-more{width:75rem;margin:0 auto;text-transform:uppercase;font-size:2.7rem;font-weight:800;letter-spacing:-2%;line-height:130%;text-align:center;margin-bottom:35rem}@media(max-width:768px){.portfolio-page{width:90vw;margin:200px auto 100px;row-gap:100px}.portfolio-page-svg{width:85vw;height:120px;top:245px}.portfolio-item{grid-template-columns:1fr;grid-template-rows:auto}.portfolio-preview{order:0;height:60vw;width:90vw;overflow:hidden}.portfolio-data{padding:30px 40px;display:flex;flex-direction:column;gap:30px}.portfolio-stack{font-size:12px}.portfolio-description{font-size:14px;height:auto}.portfolio-links{font-size:12px;height:auto;align-self:flex-start}.portfolio-more{width:90vw;font-size:17px;margin-bottom:150px}}.loading{opacity:0;transition:opacity .5s ease-in}.loaded{opacity:1}dialog{max-width:95vw;width:max-content;height:95vh;margin:0;padding:0;border:none;background:#fff0;left:50%;top:50%;transform:translate(-50%,-50%)}dialog::backdrop{background:#000c}.dialog-content{margin:0 auto;height:100%;overflow-y:auto}.dialog__close-modal{position:fixed;top:20px;right:20px;font-size:32px;background:#00000080;color:#fff;border:none;border-radius:50%;width:50px;height:50px;cursor:pointer;z-index:10000}
