#history-container {
    width: 100%;
    background-color: var(--light-gray);
    display: grid;
    grid-template-columns: auto;
    justify-items: center;
}

#history-container > h1 {
    font-size: 32pt;
    font-weight: 400;
    color: var(--middle-green);
}

.history-tile-no-img {
    background-color: var(--medium-gray);
    border-radius: var(--common-border-radius);
    box-shadow: var(--common-box-shadow);
    display: grid;
    grid-template-columns: auto;
    justify-items: center;
    align-items: center;
    text-align: center;
    padding: 10px 25px;
    width: 80%;
}

.history-tile-no-img h1,
.history-tile-img h1 {
    color: white;
    font-size: 36pt;
    font-weight: 500;
}

.history-tile-no-img h3,
.history-tile-img h3 {
    color: white;
    font-size: 20pt;
    font-weight: 400;
}

.vertical-divider {
    margin: 50px 0;
    justify-self: center;
    align-self: center;
    width: 3px;
    height: 100px;
    background-color: var(--medium-gray);
}

.history-tile-img {
    background-color: var(--medium-gray);
    border-radius: var(--common-border-radius);
    box-shadow: var(--common-box-shadow);
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: repeat(2, auto);
    justify-items: center;
    align-items: center;
    text-align: center;
    padding: 10px 25px;
    width: 80%;
}

.history-tile-img > h1 {
    grid-row: 1;
    grid-column: 1;
}

.history-tile-img > h3 {
    grid-row: 2;
    grid-column: 1;
}

.history-tile-img > img {
    grid-row: 1 / span 2;
    grid-column: 2;
    width: 200px;
    height: auto;
}

.history-tile-no-img:last-of-type {
    margin-bottom: 50px;
}

.history-tile-img:last-of-type {
    margin-bottom: 50px;
}