#events-container {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.calendar-event {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    margin-top: 50px;
    padding-left: 2%;
    padding-top: 5%;
    position: relative;
    width: 28%;
}

.ce-date {
    display: flex;
    flex-direction: column;
    height: 7rem;
    width: 4.5rem;
    position: absolute;
    top: -20px;
    font-family: var(--wp--preset--font-family--epilogue);
    font-size: var(--wp--preset--font-size--body-text);
}

.ce-month-day {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #ffeef1;
    flex-grow: 1;
    color: var(--wp--preset--color--primary) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ce-year {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: #EF626C;
    flex-grow: .1;
    font-style: normal;
    font-weight: 600;
    color: var(--wp--preset--color--white) !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ce-title {
    flex-grow: 1;
    max-width: var(--wp--style--global--content-size);
    font-family: var(--wp--preset--font-family--raleway);
}

.ce-link a {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
    font-family: var(--wp--preset--font-family--epilogue);
    font-size: var(--wp--preset--font-size--body-text);
    font-weight: 400;
    line-height: 1.5rem;
}

@media screen and (max-width: 780px) {
    #events-container {
        flex-direction: column;
    }

    .calendar-event {
        width: 90%;
        padding-top: 8%;
        margin-left: 3%;
    }
}