#sub-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    gap: 1em;

    margin: auto;

    max-width: 30em;
}

.grid-card {
    position: relative;
    text-align: center;
}

.grid-card img {
    width: 20em;

    border-radius: 10px;

    box-shadow: 3px 3px 10px 1px #3f4e6448;
}

.grid-card span {
    position: absolute;

    top: 80%;
    left: 50%;

    transform: translate(-50%, -50%);

    font-size: xx-large;
    font-weight: bold;

    width: 5em;
    height: 2em;

    padding-top: .2em;

    border-radius: 10px;

    box-shadow: 5px 5px 5px #ffffff2a;

    background-color: #141e26e5;
    color: lavender;
}

/* Reduce margins */
:root * {
    --block-spacing-vertical: calc(var(--spacing) * 1.3);
}

h1 {
    margin-bottom: .5em;
}

p {
    margin-bottom: .5em;
}