.project-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem; & > * { flex: 1 1 350px; } } .project-entry { min-height: 26rem; border: 1px solid var(--color-contrast-low); border-radius: 10px; box-shadow: 0 0 10px -10px var(--color-contrast-low), 0 0 20px -10px var(--color-contrast-low); } .project-entry-img { position: relative; border-radius: 10px 10px 0 0; min-height: 1rem; img { width: 100%; height: 20vh; object-fit: cover; border-radius: 10px 10px 0 0; border-bottom: 1px solid var(--color-contrast-low); // Image overlay z-index: -1; position: relative; filter: grayscale(50%); } } .project-entry-type { position: absolute; top: 5px; right: 5px; padding: 0.2rem 0.4rem; border-radius: 8px; background-color: var(--color-bg); border: 1px solid var(--color-contrast-low); line-height: 1rem; a { @include font-size("sm"); } } .project-entry-info { padding: 1.2rem; @include respond-to("small") { padding: 1.5rem; } } .project-entry-title { margin: 0; font-weight: 400; a { color: var(--color-contrast-high); &:hover { text-decoration: none; color: var(--color-primary); } } } .project-list-summary { @extend .summary-text; } .project-list-meta { @extend .meta-text; margin-top: 10px; }