.portfolio-image { height: var(--height-portfolio); object-fit: cover; } .list-grid-portfolio { grid-column-gap: 0px; grid-row-gap: 0px; flex-flow: wrap; grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; display: flex; width: 100vw; } .list-item-grid-portfolio { width: var(--size-grid); height: var(--size-grid); overflow: hidden; } .link-list-item-grid-portfolio { width: var(--size-grid); height: calc(2 * var(--size-grid)); color: var(--white); font-size: var(--size-s); position: relative; text-decoration: none; display: grid; grid-column-gap: 0px; grid-row-gap: 0px; justify-content: center; align-items: center; justify-items: center; grid-template: "image" var(--size-grid) "title" var(--size-grid) / 1fr; grid-auto-columns: var(--size-grid); border: none; } .link-list-item-grid-portfolio[data="fonts"]:hover, .link-list-item-grid-portfolio[data="projects"] { transform: translate(0, calc(-1 * var(--size-grid))); } .link-list-item-grid-portfolio[data="fonts"], .link-list-item-grid-portfolio[data="projects"]:hover { transform: translate(0, 0); } .image-thumbnail-link-list-item-grid-portfolio { grid-area: image; z-index: 6; object-fit: cover; width: var(--size-grid); height: var(--size-grid); position: absolute; inset: 0%; } .title-link-list-item-grid-portfolio { grid-area: title; z-index: 1; color: var(--white); font-size: var(--text-s); text-align: center; position: relative; }