.project-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem 1rem; & > * { flex: 1 1 350px; } } .project-entry { border: 1px solid var(--color-contrast-low); border-radius: 10px; box-shadow: 0 0 20px -10px var(--color-contrast-low), 0 0 20px -10px var(--color-contrast-low); max-width: 750px; } .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: 0; right: 0; padding: 0.2rem 0.4rem; background-color: var(--color-bg); border-left: 1px solid var(--color-contrast-low); border-bottom: 1px solid var(--color-contrast-low); border-top-right-radius: 10px; 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; }