/*
 The event container uses flex layout to arrange the different events as cards.
 */
.event-container {
    display: flex;
    flex-wrap: wrap;
}

/*
 Each event card displays an event in a nice way as a card.
 */
.event-card {
    border-style: solid;
    border-width: 3px;
    border-color: black;
    border-radius: 9px;
    margin: 4px 4px 4px 1px;
    padding-left: 8px;
    padding-right: 8px;
}

.event-card img {
    width: 100%;
}

.attending {
    font-size: 0.8rem;
    color: #c11012;
}

.attendee {
    color: #515151;
}

.event-type {
    text-transform: uppercase;
    color: white;
    background: #c11012;
    padding-left: 2px;
    padding-right: 2px;
}

.event-type-fdgl {
    color: #c11012;
    background: white;
    border-style: dotted;
    border-color: #c11012;
    border-width: 1px;
    padding-left: 2px;
    padding-right: 2px;
}

@media (min-width: 54rem) {
    .event-card {
        max-width: 40%;
    }
}