.projects{--items-per-row: 3}.projects .container>h2{font-size:var(--font-size-xl);font-family:"Sofia Sans",sans-serif;margin:1em -0.05em .6em;font-weight:800;line-height:1;margin-top:-0.2em}.projects .row{display:flex;flex-wrap:wrap;margin:calc(var(--grid-padding)*-1)}.projects .col{padding:var(--grid-padding);flex:1 1 calc(100%/var(--items-per-row));max-width:calc(100%/var(--items-per-row))}.projects .project{--color: var(--black-hex);--color-rgb: var(--black-rgb);position:relative;display:flex;text-decoration-color:rgba(var(--color-rgb), 0);background-color:var(--white-hex);aspect-ratio:3/2;padding:var(--font-size-md);flex-direction:column;justify-content:space-between;color:var(--color)}.projects .project::after{content:"";content:"";display:inline-block;vertical-align:text-top;background-color:var(--icon-color, var(--dark-teal));width:var(--icon-size, 1em);height:var(--icon-size, 1em);-webkit-mask-size:contain;mask-size:contain;-webkit-mask:var(--icon) no-repeat center;mask:var(--icon) no-repeat center;--icon: var(--icon-arrow-right);--icon-size: var(--font-size-md);--icon-color: var(--color);align-self:flex-end}.projects .project:hover{text-decoration-color:rgba(var(--color-rgb), 1)}.projects h3{font-size:var(--font-size-md)}.projects .col:nth-child(9n+1) .project{background-color:var(--blue-hex);--color: var(--white-hex);--color-rgb: var(--white-rgb)}.projects .col:nth-child(9n+5) .project{background-color:var(--green-hex);--color: var(--white-hex);--color-rgb: var(--white-rgb)}.projects .col:nth-child(9n+7) .project{background-color:var(--green-light-hex)}@media(min-width: 1200px){.projects .col:nth-child(9n+3) .project{background-color:var(--red-light-hex)}}@media(max-width: 1199px){.projects{--items-per-row: 2}.projects .col:nth-child(9n+4) .project{background-color:var(--red-light-hex)}}@media(max-width: 567px){.projects .project{padding:15px 10px;aspect-ratio:4/3;flex-grow:1}.projects .project::after{margin-top:-10px;margin-bottom:-6px}.projects h3{font-size:var(--font-size-copy);hyphens:auto}.projects .col{display:flex;flex-direction:column}}@media(max-width: 399px){.projects .project{aspect-ratio:8/7}}