.event-content-container {
    display: flex;
    gap: 2.5em;
    font-size: 18px;
}

    .event-content-container .event-content {
        flex-basis: 70%;
    }

    .event-content-container .event-side-bar {
        font-size: 16px;
        flex-basis: 30%;
        position: sticky;
        top: 1.25em;
        align-self: flex-start; /*Without this, the height will be the same as the entire container and so sticky won't have the desired effect, more info here: https://stackoverflow.com/questions/44446671/my-position-sticky-element-isnt-sticky-when-using-flexbox*/
    }

        .event-content-container .event-side-bar h3 {
            font-size: 24px;
            margin-top: 0;
            margin-bottom: 0.5em;
        }

        .event-content-container .event-side-bar .side-bar-content {
            padding: 2rem;
            border-radius: 1rem;
        }

@media (max-width: 850px) {
    .event-content-container {
        flex-direction: column;
    }

        .event-content-container .event-side-bar {
            margin: 0 auto;
        }
}