#main-container {
    position: relative;
    left: 0;
    width:100%;
}

#buttons-container, #featured-container {
    position: relative;
    left: 0;
    width:100%;
    overflow-x: auto;
    display: flex;
    justify-content: center;
}

.button {
    background-color: #808080;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.preview-image {
    width: 120px;
    height: 168px;
}

.deck-item-grid {
    width: 400px;
    height: auto;
    border: 5px solid green;
    display: grid;
    grid-template-columns: 280px 120px;
    grid-template-areas:
    "deck-name warlord-card"
    "creator-name warlord-card"
    "warlord-name warlord-card"
    "date warlord-card";
}

.decklist-name {
    grid-area: deck-name;
}

.creator-name {
    grid-area: creator-name;
}

.warlord-name {
    grid-area: warlord-name;
}

.date {
    grid-area: date;
}

.preview-image {
    grid-area: warlord-card;
}