:root {
    --card_width: 250px;
    --card_border_radius: 16px;
    --row_increment: 10px;
    --card_small: 26;
    --card_medium: 33;
    --card_large: 45;
}

.body {
    margin: 0;
    padding: 0;
    background-color: grey;
}

.pin_container {
    margin: 0;
    padding: 0;
    width: 80vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--card_width));
    grid-auto-rows: var(--row_increment);
    justify-content: center;
    background-color: black;
}

.card {
    padding: 0;
    margin: 15px 10px;
    border-radius: var(--card_border_radius);

    background-color: red;
}  

.card_small {
    grid-row-end: span var(--card_small);
}

.card_medium {
    grid-row-end: span var(--card_medium);
}

.card_large {
    grid-row-end: span var(--card_large);
}