.portfolio-units-shell {
    padding: 0rem 0 3rem;
}

.portfolio-unit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.portfolio-unit-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--border-radius-m);
    box-shadow: var(--shadow-s);
    background-color: var(--col-bw-100);
    border: 1px solid var(--col-bw-200);

    grid-template-columns: 1fr 4rem;
    grid-template-rows: 1.2rem auto 1.5rem;
    grid-template-areas: 
        "name number"
        "chips chips"
        "actions actions";

    .button-primary {
        width: fit-content;
        justify-self: end;
        align-self: end;
    }

    .chips {
        grid-area: chips;
        margin-left: -.1rem;
        display: flex;
        flex-wrap: wrap;
        gap: .2rem;
        align-items: end;
        padding: .5rem 0;
    }
    .name {
        grid-area: name;
        font-size: 1.2rem;
        font-weight: bold;
    }
    .number {
        grid-area: number;
        font-family: var(--font-mono), monospace;
        text-align: right;
    }
    .actions {
        justify-self: end;
        grid-area: actions;
    }
}