.article .article-title, .event .event-title {
    font-size: var(--font-size-large);
    font-weight: bold;
}

.article .article-subtitle, .event .event-subtitle {
    font-size: var(--font-size-medium-large);
    color: var(--font-color-secondary);
}

.event .event-date-time {
    font-size: var(--font-size-medium);
    font-weight: bold;
}

.event .event-location {
    font-size: var(--font-size-medium);
}

.event .rsvp-calendar {
    margin-bottom: var(--content-margin);
}

.events .events-select-by-years {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 12rem;
}

.events .events-select-by-years li:first-child {
    display: none;
}

.article .main-media, .event .main-media {
    text-align: center;
}

.article figure figcaption, .event figure figcaption {
    font-style: italic;
    font-size: var(--font-size-small);
}

.article .article-abstract, .event .event-abstract {
    font-weight: bold;
}

.article .article-content, .event .event-content {
    font-family: var(--font-family-article);
    font-size: var(--font-size-article-content);
}

.article figure, .event figure {
    display: flex;
    flex-direction: column;
}

.article blockquote, .event blockquote {
    font-size: var(--font-size-large);
    margin-left: 1.5em;
    font-style: italic;
}

.article h1, .article h2, .article h3,
.article h4, .article h5, .article h6,
.event h1, .event h2, .event h3,
.event h4, .event h5, .event h6 {
    font-family: var(--font-family-sans);
}

.article h1, .event h1 {
    font-size: var(--font-size-large);
    font-weight: bold;
}

.article h2, .event h2 {
    font-size: var(--font-size-medium-large);
    font-weight: bold;
}

.article h3, .event h3 {
    font-size: var(--font-size-medium);
    font-weight: bold;
}

.article .AudioPlayerContainer {
    margin-bottom: var(--content-margin);
}

.article-abstract, .article-content {
    margin-top: var(--content-margin);
}

/*.article-audio > p, .article-audio > a {
    display: inline;
}*/

:is(.article-audio,.event-audio) > p:last-of-type,
:is(.article-audio,.event-audio) > .article-transcript {
    display: inline;
}

:is(.article-transcript,.event-transcript):before {
    content: "\000B7";
    margin-right: calc(1em/8);
    color: initial;
}

:is(.article-transcript,.event-transcript):before {
    content: "\000B7";
    margin-right: calc(1em/8);
    color: initial;
}

:is(.article-transcript,.event-transcript):any-link:before {
    color: initial;
}


/* 
    user-article is to be applied to any HTML content that the user supplies, and 
    is based solely off tags
*/
.user-article {
    font-size: var(--font-size-article-content);
    font-family: var(--font-family-sans);
}

/* 
    same as body-row-header in layout.css 
    smaller font though
*/
.user-article h1 {
    font-size: var(--font-size-large);
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 0.5rem solid var(--ucla-gold);
    padding-bottom: 0.60rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.user-article h2 {
    font-size: var(--font-size-medium-large);
    font-weight: bold;
}

.user-article h3 {
    font-size: var(--font-size-medium);
    font-weight: bold;
}


/*

    ARTICLE ONLY


*/

.article .flex-control-nav.flex-control-paging {
    position: initial;
}

.article .flex-direction-nav :is(.flex-prev,.flex-next) {
    background-color: transparent;
    backdrop-filter: invert(80%);
    border-radius: 50%;
    background-size: cover;
}

.article .flex-caption {
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0;
}

/*

    EVENT ONLY


*/

.event-header-title {
    font-size: var(--font-size-medium);
}

.event-date-display {
    text-align: center;
    font-size: var(--font-size-large);
    line-height: 1.0;
}

.event-date-display > .day-num {
    font-weight: bold;
    font-size: var(--font-size-x-large);
}

.event-date-display > .month-name {
    font-weight: bold;
}

.event-time-display {
    text-align: center;
    font-size: var(--font-size-medium);
    line-height: 1;
}

    .event-time-display > .time, .event-time-display > .timezone {
        font-size: var(--font-size-medium);
    }

.rsvp-calendar {
    padding-top: 0.5rem;
}

.sidebar-menu__title {
    margin-bottom: 0;
    font-size: var(--font-size-large);
}

.sidebar-menu__list {
    list-style: none;
    margin: 0;
}