#games-feed-main {
    padding: 3vh 4vw 1vh;
}

ul.game-feed {
    width: 100%;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.game-feed li {
    list-style: none;
}

#geoFilter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    position: relative;
    width: -moz-fit-content;
    width: fit-content;
}

#geoFilterMenu {
    z-index: 10;
    top: 80%;
    background-color: var(--adaptivecol-95);
    box-shadow: var(--highlight-shadow);
}

#hero {
    background: var(--brand-color-2) center center no-repeat;
    min-height: 200px;
    background-size: cover;

    display: flex;
    flex-direction: column;
}

#heroContainer {
    padding: calc(min(7vw, 50px)) 0;
}

#heroContainer hr {
    border: none;
    height: 3px;
    color: white;
    background-color: white;
    width: 80%;
    margin: 10px auto 20px;
    opacity: 70%;
}

#hero-cta {
    color: hsl(0, 0%, 100%);
    font-weight: 300;
}

#create-game-btn {
    width: 70%;
    max-width: 250px;
}

#gameFeedContent {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#noMatchesText {
    font-weight: 700;
    font-size: calc(min(5vw, 1.25rem));
    color: var(--text-muted);
}

/* Game Details Card */

.game-details-card {
    position: relative;
    display: block;
    top: 0;

    margin: 0px 0px 60px;

    background: hsl(0, 0%, 95%);
    cursor: pointer;

    border-radius: 0.5rem;
    border: var(--border-card);
    box-shadow: 0px 6px 6px hsla(0, 0%, 0%, 0.15),
        0px 10px 10px hsla(0, 0%, 0%, 0.30);

    transition: top ease 0.35s;

    overflow: hidden;
}

.game-details-card:hover {
    filter: brightness(92.5%) saturate(95%);
    box-shadow: 0px 8px 8px hsla(0, 0%, 0%, 0.20),
        0px 16px 16px hsla(0, 0%, 0%, 0.30);
    top: 5px;
}

.game-details-card-fill-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
}

.game-details-card-container {
    margin: 0;
    width: 100%;
    max-width: none;
}

.game-details-card-container div[class^='col'],
.game-details-card-container div[class*=' col'] {
    padding: 0;
}

.game-details-card-container .row {
    --details-card-bg-col: hsla(0, 0%, 70%, 50%);
    background-color: var(--details-card-bg-col);
}

.game-details-card-content {
    border: 3px solid var(--details-card-bg-col);
    background-color: hsl(0, 0%, 97.5%);
    color: var(--brand-color-text);
    border-radius: 0.5rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    height: calc(min(40vw, 120px));
}

.card-date-content {
    border: 1px solid var(--details-card-bg-col);
    background-color: var(--basecol-10);
    color: white;
    font-weight: 700;
    text-align: center;

    height: calc(min(12vw, 30px));
}

.game-details-card-button {
    border: 1px solid var(--details-card-bg-col);
    position: relative;
    z-index: 3;

    background-color: var(--btn-cta-bg);
    color: var(--btn-cta-color);
    font-weight: 900;
    text-align: center;

    height: calc(min(12vw, 30px));
}

.game-details-card-button:hover {
    background-color: var(--btn-cta-highlight-bg);
}

.game-details-card-button .game-details-card-button-link {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-icon {
    font-size: calc(min(8vw, 1.6rem));
    line-height: 1;
    height: 40%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
}

.card-text {
    height: 60%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-text,
.game-details-card-fill-link {
    font-size: calc(min(5vw, 1rem));
    line-height: 1;
    font-weight: 600;
}

@media (min-width: 992px) {

    .card-date-content,
    .game-details-card-button {
        height: 100%;
    }
}