/* ============================================================================
   projects.css — the side-project cards.
   ========================================================================= */

.proj-grid {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    align-items: start;
}

.proj {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.proj__media {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.proj__media img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

.proj__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--sp-6);
}

.proj__title {
    font-size: var(--step-1);
    margin-bottom: var(--sp-3);
}

.proj__text {
    color: var(--ink-soft);
    font-size: var(--step--1);
    flex: 1;
}

.proj .link { align-self: flex-start; margin-top: var(--sp-5); }