/* Upcoming event grid variant */

/* TODO - Remove events-v2 scope during clean */

.events-v2 {
  .browse-cards-block-content .browse-card.upcoming-event-card,
  .browse-filters-results .browse-card.upcoming-event-card,
  .browse-cards-block-content .browse-card.event-upcoming-event-card,
  .browse-filters-results .browse-card.event-upcoming-event-card {
    background-color: var(--spectrum-gray-50);
    min-height: 450px;
  }

  .browse-card.upcoming-event-card .browse-card-figure,
  .browse-card.event-upcoming-event-card .browse-card-figure {
    background-color: var(--spectrum-gray-900);
    max-height: none;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0 0 45%;
  }

  /* Specific styles for fallback images only */
  .browse-card.upcoming-event-card .browse-card-figure.has-fallback-image img,
  .browse-card.event-upcoming-event-card .browse-card-figure.has-fallback-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-bottom: none;
    margin-top: 0;
    z-index: 7;
  }

  .browse-card.upcoming-event-card .browse-card-banner,
  .browse-card.event-upcoming-event-card .browse-card-banner {
    background-color: var(--non-spectrum-adobe-red) !important;
    letter-spacing: 0.2px;
    z-index: 8;
  }

  .browse-card.upcoming-event-card .browse-card-figure .event-series-banner-no-speakers,
  .browse-card.event-upcoming-event-card .browse-card-figure .event-series-banner-no-speakers {
    position: relative;
    padding: 10px 0;
    margin: 30px 0 20px;
    color: var(--spectrum-gray-50);
    font-size: var(--spectrum-font-size-700);
    font-weight: var(--font-weight-bold);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10%;
    padding-right: 10%;
    letter-spacing: 1px;
  }

  .browse-card.upcoming-event-card .browse-card-figure .event-series-banner-no-speakers::before,
  .browse-card.upcoming-event-card .browse-card-figure .event-series-banner-no-speakers::after,
  .browse-card.event-upcoming-event-card .browse-card-figure .event-series-banner-no-speakers::before,
  .browse-card.event-upcoming-event-card .browse-card-figure .event-series-banner-no-speakers::after {
    content: '';
    position: absolute;
    height: 8px;
    transform: scaleY(0.5);
    background-color: var(--non-spectrum-adobe-red);
  }

  /* Offset is intentional: top bar flush left, bottom bar flush right. */
  .browse-card.upcoming-event-card .browse-card-figure .event-series-banner-no-speakers::before,
  .browse-card.event-upcoming-event-card .browse-card-figure .event-series-banner-no-speakers::before {
    top: -5px;
    left: 0;
    width: 90%;
  }

  .browse-card.upcoming-event-card .browse-card-figure .event-series-banner-no-speakers::after,
  .browse-card.event-upcoming-event-card .browse-card-figure .event-series-banner-no-speakers::after {
    bottom: -5px;
    right: 0;
    width: 90%;
  }

  .browse-card.upcoming-event-card .location-type,
  .browse-card.event-upcoming-event-card .location-type {
    position: absolute;
    top: 13px;
    right: 0;
    background-color: transparent;
    color: var(--spectrum-gray-50);
    padding: var(--spectrum-spacing-75) var(--spectrum-spacing-100);
    font-size: var(--spectrum-font-size-50);
    font-weight: var(--font-weight-heavy);
    line-height: var(--spectrum-line-height-s);
    text-transform: uppercase;
    letter-spacing: 0.2px;
  }

  .browse-filters:not(:has(.list)) .browse-card.upcoming-event-card .location-type span,
  .browse-filters:not(:has(.list)) .browse-card.event-upcoming-event-card .location-type span {
    display: none;
  }

  .browse-card.upcoming-event-card .event-speakers-container,
  .browse-card.event-upcoming-event-card .event-speakers-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 0 20px;
  }

  .browse-card.upcoming-event-card .speaker-profile-container,
  .browse-card.event-upcoming-event-card .speaker-profile-container {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: -15px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
  }

  .browse-card.upcoming-event-card .speaker-profile-container:last-child,
  .browse-card.event-upcoming-event-card .speaker-profile-container:last-child {
    margin-right: 0;
  }

  .browse-card.upcoming-event-card .speaker-profile-image,
  .browse-card.event-upcoming-event-card .speaker-profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .browse-card.upcoming-event-card .event-series-banner,
  .browse-card.event-upcoming-event-card .event-series-banner {
    color: var(--spectrum-gray-50);
    font-size: var(--spectrum-font-size-100);
    font-weight: var(--font-weight-bold);
    text-align: center;
    padding: 0 10px;
    width: 100%;
    letter-spacing: 0.2px;
  }

  .browse-card.upcoming-event-card .browse-card-description-text,
  .browse-card.upcoming-event-card .browse-card-description-text *,
  .browse-card.event-upcoming-event-card .browse-card-description-text,
  .browse-card.event-upcoming-event-card .browse-card-description-text * {
    max-height: none;
    -webkit-line-clamp: 2;
  }

  .browse-card.upcoming-event-card .browse-card-footer,
  .browse-card.event-upcoming-event-card .browse-card-footer {
    justify-content: flex-end;
  }

  .browse-card.upcoming-event-card .browse-card-footer .footer-speakers-section,
  .browse-card.event-upcoming-event-card .browse-card-footer .footer-speakers-section {
    display: none;
  }

  .browse-card.upcoming-event-card .card-figure-date,
  .browse-card.upcoming-event-card .browse-card-footer .browse-card-event-info,
  .browse-card.event-upcoming-event-card .card-figure-date,
  .browse-card.event-upcoming-event-card .browse-card-footer .browse-card-event-info,
  .browse-filters-results .browse-card.upcoming-event-card .show-more,
  .browse-filters-results .browse-card.upcoming-event-card .show-less,
  .browse-filters-results .browse-card.event-upcoming-event-card .show-more,
  .browse-filters-results .browse-card.event-upcoming-event-card .show-less,
  .browse-cards-block-content > div .browse-card.upcoming-event-card .show-more,
  .browse-cards-block-content > div .browse-card.upcoming-event-card .show-less,
  .browse-cards-block-content > div .browse-card.event-upcoming-event-card .show-more,
  .browse-cards-block-content > div .browse-card.event-upcoming-event-card .show-less {
    display: none;
  }
}

/** List view styles start **/

:is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
  .browse-card.upcoming-event-card
  .browse-card-figure
  .event-speakers-container,
:is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
  .browse-card.event-upcoming-event-card
  .browse-card-figure
  .event-speakers-container {
  display: flex;
}

.browse-card.upcoming-event-card .browse-card-footer .location-type,
.browse-card.event-upcoming-event-card .browse-card-footer .location-type,
:is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
  .browse-card.upcoming-event-card
  .location-type,
:is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
  .browse-card.event-upcoming-event-card
  .location-type {
  display: none;
}

body[class^='browse-'] .browse-card.upcoming-event-card .browse-card-figure .event-series-banner-no-speakers,
body[class^='browse-'] .browse-card.event-upcoming-event-card .browse-card-figure .event-series-banner-no-speakers {
  font-size: var(--spectrum-font-size-700);
}

@media only screen and (min-width: 600px) {
  .events-v2 {
    .browse-card.upcoming-event-card .browse-card-figure .event-series-banner-no-speakers,
    .browse-card.event-upcoming-event-card .browse-card-figure .event-series-banner-no-speakers {
      font-size: calc(var(--spectrum-font-size-500) + var(--spectrum-spacing-50));
    }
  }
}

@media only screen and (min-width: 900px) {
  .events-v2 {
    .browse-card.upcoming-event-card,
    .browse-card.event-upcoming-event-card {
      text-align: left;
    }
  }

  /** List view styles start **/

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list) .browse-card.upcoming-event-card,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list) .browse-card.event-upcoming-event-card {
    background-color: var(--spectrum-gray-50);
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-banner,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-banner {
    top: var(--spectrum-spacing-300);
    height: calc(2 * var(--spectrum-spacing-200) - var(--spectrum-spacing-50));
    font-style: normal;
    font-variant: normal;
    font-weight: var(--font-weight-heavy);
    font-size: var(--spectrum-font-size-50);
    line-height: var(--spectrum-line-height-xs);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure
    .icon-calendar
    img,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure
    .icon-calendar
    img {
    width: var(--spectrum-spacing-500);
    height: var(--spectrum-spacing-500);
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure {
    flex: 0 0 23.34%;
    border: unset;
    border-radius: var(--spectrum-spacing-300) 0 0 var(--spectrum-spacing-300);
    max-height: unset;
    height: auto;
    align-items: center;
    justify-content: center;
  }

  /*
   * Fallback file is 572×396. Stretch the figure with the row so the column matches
   * the other list thumbs and the badge stays at the top. Contain keeps the file
   * ratio inside that column. The date stays in the right column.
   */
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure.has-fallback-image,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure.has-fallback-image {
    aspect-ratio: 572 / 396;
    height: auto;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure
    .card-figure-date,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure
    .card-figure-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spectrum-spacing-75);
    margin-top: calc(var(--spectrum-spacing-700) + var(--spectrum-spacing-50));
    margin-bottom: calc(var(--spectrum-spacing-100) + var(--spectrum-spacing-50));
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure
    .card-figure-date
    .date-display,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure
    .card-figure-date
    .date-display {
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    font-size: var(--spectrum-font-size-800);
    line-height: var(--spectrum-line-height-xxl);
    letter-spacing: 0;
    color: var(--spectrum-gray-50);
    opacity: 1;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure
    .card-figure-date
    .time-display,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure
    .card-figure-date
    .time-display {
    text-align: left;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: var(--spectrum-font-size-200);
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--spectrum-gray-50);
    opacity: 1;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure.has-fallback-image
    .card-figure-date,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure.has-fallback-image
    .card-figure-date {
    display: none;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-content,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-content {
    padding: var(--spectrum-spacing-500);
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .browse-card-event-info,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .browse-card-event-info {
    order: 0;
    margin: 0;
    align-self: flex-start;
    margin-bottom: var(--spectrum-spacing-300);
    display: flex;
    max-width: 100%;
    min-width: 0;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-content
    .browse-card-event-info,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure
    .event-speakers-container,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-content
    .browse-card-event-info,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure
    .event-speakers-container {
    display: none;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer {
    padding: var(--spectrum-spacing-500);

    /*
     * One footer width for every list card. 18.52% of a wide row, but never
     * below 13rem and never grown by the nowrap date. On iPad the filters
     * column makes 18.52% narrower than the date, so each proportional
     * timestamp was a different pill (EXLM-5684).
     */
    flex: 0 0 max(18.52%, 13rem);
    width: max(18.52%, 13rem);
    min-width: 13rem;
    max-width: max(18.52%, 13rem);
    box-sizing: border-box;
    position: relative;
    align-self: stretch;
    flex-direction: column;
    justify-content: unset;
    border-radius: var(--spectrum-spacing-300);
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .browse-card-event-info
    .browse-card-event-time,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .browse-card-event-info
    .browse-card-event-time {
    min-width: 0;
    overflow: hidden;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .browse-card-event-info
    .browse-card-event-time
    h6,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .browse-card-event-info
    .browse-card-event-time
    h6 {
    color: var(--non-spectrum-dark-charcoal);
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .browse-card-event-info
    .icon,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .browse-card-event-info
    .icon {
    width: calc(var(--spectrum-spacing-300) + var(--spectrum-spacing-50));
    height: calc(var(--spectrum-spacing-300) + var(--spectrum-spacing-50));
    flex-shrink: 0;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .browse-card-cta-element,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .browse-card-cta-element {
    order: 3;
    margin-block: calc(var(--spectrum-spacing-300) + var(--spectrum-spacing-75));
    margin-inline: 0;
    background: var(--spectrum-blue-900) 0% 0% no-repeat padding-box;
    border-radius: var(--spectrum-spacing-300);
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: var(--spectrum-font-size-100);
    line-height: var(--spectrum-line-height-xs);
    letter-spacing: 0;
    color: var(--spectrum-gray-50);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: var(--spectrum-spacing-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .browse-card-cta-element
    .icon.icon-new-tab-blue,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .browse-card-cta-element
    .icon.icon-new-tab-blue {
    display: none;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer::before,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer::before {
    content: '';
    position: absolute;
    top: var(--spectrum-spacing-500);
    bottom: var(--spectrum-spacing-500);
    left: 0;
    width: 1px;
    background-color: var(--non-spectrum-divider-gray);
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    > div
    .browse-card.upcoming-event-card,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    > div
    .browse-card.event-upcoming-event-card {
    min-height: auto;
    flex-direction: row;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    > div
    .browse-card.upcoming-event-card
    .browse-card-description-text.text-expanded,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    > div
    .browse-card.event-upcoming-event-card
    .browse-card-description-text.text-expanded {
    -webkit-line-clamp: 2;
    max-height: unset;
    display: -webkit-box;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    > div
    .browse-card.upcoming-event-card
    .show-more,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    > div
    .browse-card.upcoming-event-card.expanded
    .show-less,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    > div
    .browse-card.event-upcoming-event-card
    .show-more,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    > div
    .browse-card.event-upcoming-event-card.expanded
    .show-less {
    text-align: left;
    display: block;
    text-decoration: underline;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: calc(var(--spectrum-font-size-200) + var(--spectrum-spacing-50));
    line-height: var(--spectrum-line-height-s);
    letter-spacing: 0;
    color: var(--spectrum-blue-900);
    opacity: 1;
    margin-top: var(--spectrum-spacing-100);
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    > div
    .browse-card.upcoming-event-card.expanded
    .show-more,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    > div
    .browse-card.event-upcoming-event-card.expanded
    .show-more {
    display: none;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    .browse-card.upcoming-event-card
    .browse-card-description-text.text-expanded
    .show-more,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    .browse-card.event-upcoming-event-card
    .browse-card-description-text.text-expanded
    .show-more {
    display: none;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    > div
    .browse-card.upcoming-event-card.expanded
    .browse-card-description-text.text-expanded,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-cards-block-content
    > div
    .browse-card.event-upcoming-event-card.expanded
    .browse-card-description-text.text-expanded {
    -webkit-line-clamp: unset;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .location-type,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .location-type {
    display: flex;
    align-items: center;
    margin-bottom: var(--spectrum-spacing-300);
    position: unset;
    align-self: flex-start;
    padding: 0;
    color: var(--non-spectrum-dark-charcoal);
    font-size: var(--spectrum-font-size-75);
    font-weight: var(--font-weight-bold);
    text-transform: none;
    gap: var(--spectrum-spacing-75);
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .location-type
    span::first-letter,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .location-type
    span::first-letter {
    text-transform: uppercase;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .location-type
    .icon,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .location-type
    .icon {
    width: calc(var(--spectrum-spacing-300) + var(--spectrum-spacing-50));
    height: calc(var(--spectrum-spacing-300) + var(--spectrum-spacing-50));
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure
    .event-series-banner,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure
    .event-series-banner-no-speakers,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure
    .event-series-banner,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure
    .event-series-banner-no-speakers {
    text-align: center;
    font-size: var(--spectrum-font-size-100);
    color: var(--spectrum-gray-50);
    opacity: 1;
    position: relative;
    padding-block: calc(var(--spectrum-spacing-100) + var(--spectrum-spacing-50));
    padding-inline: 10%;
    margin: 0;
    order: 1;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure
    .event-series-banner-no-speakers::before,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure
    .event-series-banner::before,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure
    .event-series-banner-no-speakers::before,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure
    .event-series-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    height: 3px;
    background-color: #f00;
    width: 80%;
    transform: translateX(-50%);
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure
    .event-series-banner-no-speakers::after,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure
    .event-series-banner-no-speakers::after {
    display: none;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-description-text,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-description-text {
    display: block;
    -webkit-line-clamp: unset;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .footer-speakers-section,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .footer-speakers-section {
    order: 4;
    align-self: flex-start;
    width: 100%;
    display: block;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speakers-heading,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speakers-heading {
    font-size: var(--spectrum-font-size-200);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spectrum-spacing-300);
    color: #000;
    position: relative;
    padding-bottom: var(--spectrum-spacing-100);
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speakers-heading::after,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speakers-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: var(--non-spectrum-unicorn-silver);
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speakers-list,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speakers-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spectrum-spacing-300) - var(--spectrum-spacing-50));
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speaker-item,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speaker-item {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spectrum-spacing-100) + var(--spectrum-spacing-50));
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speaker-img-container,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speaker-img-container {
    width: calc(var(--spectrum-spacing-700) + var(--spectrum-spacing-50));
    height: calc(var(--spectrum-spacing-700) + var(--spectrum-spacing-50));
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speaker-img-container
    img,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speaker-img-container
    img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speaker-info,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speaker-info {
    display: flex;
    flex-direction: column;
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speaker-name,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-footer
    .footer-speakers-section
    .speaker-name {
    font-size: var(--spectrum-font-size-75);
    font-weight: var(--font-weight-bold);
    color: var(--non-spectrum-dark-gray);
  }
}

@media only screen and (min-width: 1024px) {
  .events-v2 {
    .browse-card.upcoming-event-card .browse-card-figure .event-series-banner-no-speakers,
    .browse-card.event-upcoming-event-card .browse-card-figure .event-series-banner-no-speakers {
      font-size: var(--spectrum-font-size-700);
    }
  }

  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.upcoming-event-card
    .browse-card-figure
    .event-series-banner-no-speakers,
  :is(.upcoming-event-v2.list, .events-search .events-search-results-body.list)
    .browse-card.event-upcoming-event-card
    .browse-card-figure
    .event-series-banner-no-speakers {
    font-size: var(--spectrum-font-size-100);
  }
}

@media only screen and (min-width: 1440px) {
  body[class^='browse-'] .browse-card.upcoming-event-card .browse-card-figure .event-series-banner-no-speakers,
  body[class^='browse-'] .browse-card.event-upcoming-event-card .browse-card-figure .event-series-banner-no-speakers {
    font-size: calc(var(--spectrum-font-size-500) + var(--spectrum-spacing-50));
  }
}