html {
    display: flex;
    height: 100%;
}

.labs {
    margin: 0;
    padding: 1rem;
    display: flex;
    flex-flow: column;
    /* initialize a counter for `labs` */
    counter-reset: labs;
}

.labs__main {
    flex-grow: 1;
}

.labs__footer {
    padding: 1rem 0;
    border-top: 1px solid var(--tertiary-3);
}

.labs__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 1rem;
    padding: 1rem 0;
}

.labs__grid a {
    color: var(--primary-2);
}

.labs__grid a:visited {
    color: var(--primary-4);
}

.labs__grid a:hover {
    color: var(--primary-1);
}

.lab {
    /* display: block to remove the li marger pseudo element */
    display: block;
    background: var(--tertiary-3);
    color: black;
    border: 1px solid var(--tertiary-4);
    border-radius: 0.25rem;
    padding: 1rem;
}

.lab__figure {
    display: flex;
    flex-flow: column;
    gap: 1rem;
    margin: 0;
    height: 100%;
}

.p-name {
    counter-increment: labs;
}

.lab__img--wacom {
    height: 150px;
}

.lab__placeholder, .lab__img {
    flex: 1 0 auto;
}

.lab__placeholder {
    width: 100%;
    height: auto;
    filter: grayscale(0.75);
}

.lab__img + .lab__caption:before {
    content: counter(labs) ". ";
}

.lab__caption {
    text-align: center;
}