.upcoming-sessions {
  position: relative;
  box-sizing: border-box;
}

.upcoming-sessions *,
.upcoming-sessions *::before,
.upcoming-sessions *::after {
  box-sizing: inherit;
}

.upcoming-sessions--attached {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 0 56px var(--s2a-spacing-lg);
}

@media (min-width: 1024px) {
  .upcoming-sessions--attached {
    padding-left: 86px;
  }
}

@media (min-width: 1440px) {
  .upcoming-sessions--attached {
    padding-left: var(--s2a-layout-lg);
  }
}

@media (min-width: 1920px) {
  .upcoming-sessions--attached {
    padding-left: max(220px, (100vw - 1920px) / 2);
  }
}

.upcoming-sessions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2a-spacing-md, 16px);
  margin: 0 0 var(--s2a-spacing-sm, 12px);
}

.upcoming-sessions-heading {
  margin: 0;
  font-size: var(--s2a-font-size-lg, 18px);
  line-height: var(--s2a-typography-line-height-title-6, 18px);
  letter-spacing: var(--s2a-typography-letter-spacing-heading-6, -0.2px);
  hanging-punctuation: first last;
  text-wrap: balance;
  color: var(--s2a-color-gray-1000, #000);
}

.upcoming-sessions.dark-card .upcoming-sessions-heading,
.section.dark .upcoming-sessions .upcoming-sessions-heading {
  color: var(--s2a-color-gray-25, #fff);
}

.upcoming-sessions-track {
  display: flex;
  align-items: center;
  gap: var(--s2a-spacing-md, 16px);
  overflow-x: auto;
  overflow-y: visible;
  padding-block: var(--s2a-spacing-xs, 8px);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.upcoming-sessions-track::-webkit-scrollbar {
  display: none;
}

.upcoming-sessions.clip-end .upcoming-sessions-track {
  padding-inline-start: 0;
}

.upcoming-sessions-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.upcoming-sessions-card--rotating-out {
  transition: opacity 0.35s ease, transform 0.35s ease;
  opacity: 0;
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .upcoming-sessions-card--rotating-out {
    transition: none;
  }
}

.upcoming-sessions-controls {
  display: flex;
  margin-right: var(--s2a-spacing-lg, 24px);
  flex-shrink: 0;
  align-items: center;
  gap: var(--s2a-spacing-md, 16px);
}

.upcoming-sessions[data-few-sessions="true"] .upcoming-sessions-controls {
  display: none;
}

.upcoming-sessions-arrow {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s2a-spacing-2xl, 48px);
  height: var(--s2a-spacing-2xl, 48px);
  border-radius: var(--s2a-border-radius-round, 999px);
  border: var(--s2a-border-width-sm, 1px) solid var(--s2a-color-transparent-white-24, rgb(255 255 255 / 24%));
  background: var(--s2a-color-transparent-black-64, rgb(0 0 0 / 64%));
  backdrop-filter: blur(4px);
  color: var(--s2a-color-gray-25, #fff);
  cursor: pointer;
  transition: background 0.15s ease;
}

.upcoming-sessions-arrow:hover {
  background: var(--s2a-color-transparent-black-80, rgb(0 0 0 / 80%));
}


.upcoming-sessions.dark-card .upcoming-sessions-arrow,
.section.dark .upcoming-sessions .upcoming-sessions-arrow {
  border-color: var(--s2a-color-transparent-white-24, rgb(255 255 255 / 24%));
  background: var(--s2a-color-transparent-black-64, rgb(0 0 0 / 64%));
  color: var(--s2a-color-gray-25, #fff);
}

.upcoming-sessions.dark-card .upcoming-sessions-arrow:hover,
.section.dark .upcoming-sessions .upcoming-sessions-arrow:hover {
  background: var(--s2a-color-transparent-black-80, rgb(0 0 0 / 80%));
}

.upcoming-sessions-arrow--prev {
  transform: rotate(180deg);
}

.upcoming-sessions .sg-card {
  background: var(--s2a-color-gray-50, #f8f8f8);
  border: none;
  border-radius: var(--s2a-border-radius-sm, 8px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  width: 255px;
  min-height: 168px;
  padding: var(--s2a-spacing-md, 16px);
  gap: var(--s2a-spacing-md, 16px);
  cursor: pointer;
  will-change: width, min-height;
  transition: background 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              min-height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.upcoming-sessions .sg-card:focus-visible {
  outline: var(--s2a-border-width-md, 2px) solid var(--s2a-color-gray-1000, #000);
  outline-offset: 2px;
}

.upcoming-sessions .sg-card:active {
  background: var(--s2a-color-gray-75, #ececec);
}

.upcoming-sessions .sg-card__body {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.upcoming-sessions .sg-card__badge-row {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  margin-top: var(--s2a-spacing-md, 16px);
  margin-bottom: 0;
}

.upcoming-sessions .sg-card__title {
  font-family: 'Adobe Clean Spectrum VF', var(--body-font-family);
  font-weight: var(--s2a-font-weight-eyebrow, var(--s2a-font-weight-adobe-clean-bold, 700));
  font-size: var(--s2a-font-size-md, 16px);
  line-height: 1.25;
  color: var(--s2a-color-gray-1000, #000);
  margin: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Summary shown only on the expanded desktop hover/focus card (see the >=1280px block below);
 * collapsed desktop and mobile/tablet cards never have room for it.
 */
.upcoming-sessions .sg-card__description {
  display: none;
  margin: 0;
  font-family: 'Adobe Clean Spectrum VF', var(--body-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-regular, 400);
  font-size: var(--s2a-font-size-xs, 12px);
  line-height: var(--s2a-font-line-height-xs, 18px);
  color: var(--s2a-color-gray-600, #717171);
}

.upcoming-sessions .sg-category-badge__count {
  font-size: var(--s2a-font-size-xs, 12px);
  font-weight: var(--s2a-font-weight-adobe-clean-bold, 700);
  line-height: var(--s2a-font-line-height-2xs, 16px);
  color: currentcolor;
}

.upcoming-sessions .sg-card__footer {
  display: none;
}

.upcoming-sessions .sg-card__track {
  font-size: var(--s2a-font-size-xs, 12px);
  font-weight: 500;
  color: var(--s2a-color-gray-1000, #000);
  display: flex;
  align-items: center;
  gap: var(--s2a-spacing-xs, 8px);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
  transition: color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.upcoming-sessions .sg-card__footer-badge {
  display: none;
}

.upcoming-sessions .sg-card__time {
  font-size: var(--s2a-font-size-xs, 12px);
  color: var(--s2a-color-gray-600, #717171);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-align: right;
  transition: color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.upcoming-sessions .sg-card__actions {
  display: flex;
  flex-direction: row;
  gap: var(--s2a-spacing-sm, 12px);
  flex-shrink: 0;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  opacity: 1;
  pointer-events: auto;
}

.upcoming-sessions .sg-card__actions::after {
  content: attr(data-time);
  font-size: var(--s2a-font-size-xs, 12px);
  color: var(--s2a-color-gray-600, #717171);
  margin-left: auto;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  line-height: 1.5;
  pointer-events: none;
}

.upcoming-sessions .sg-icon-btn--solid.sg-icon-btn--on-dark.sg-card__btn--schedule,
.upcoming-sessions .sg-icon-btn--solid.sg-icon-btn--on-dark.sg-card__btn--favorite {
  background: transparent;
  border-color: #fff;
  color: #fff;
  backdrop-filter: blur(4.6875px);
}

.upcoming-sessions .sg-card.is-scheduled .sg-icon-btn--on-dark.sg-card__btn--schedule,
.upcoming-sessions .sg-card.is-favorited .sg-icon-btn--on-dark.sg-card__btn--favorite {
  background: #fff;
  border-color: var(--s2a-color-gray-100, #e9e9e9);
  color: #000;
  backdrop-filter: blur(4.6875px);
}

.upcoming-sessions.dark-card .sg-card,
.upcoming-sessions.dark-card .sg-card.is-scheduled,
.upcoming-sessions.dark-card .sg-card.is-favorited,
.section.dark .upcoming-sessions .sg-card,
.section.dark .upcoming-sessions .sg-card.is-scheduled,
.section.dark .upcoming-sessions .sg-card.is-favorited {
  background: rgb(10 10 10 / 50%);
  border: 1px solid #505050;
  box-shadow: none;

  /* Frosts whatever sits behind the card (the marquee's own background art) instead of
     requiring a bespoke pre-blurred asset; see the >=1280px block, which turns this back off. */
  backdrop-filter: blur(var(--s2a-blur-sm, 16px));
}

/* stylelint-disable no-descending-specificity */
.upcoming-sessions.dark-card .sg-card:hover,
.section.dark .upcoming-sessions .sg-card:hover {
  background: #131313;
  border-color: #505050;
  box-shadow: none;

  /* Background is opaque here, so there's nothing to blur through - skip the GPU cost. */
  backdrop-filter: none;
}

.upcoming-sessions.dark-card .sg-card:focus-visible,
.section.dark .upcoming-sessions .sg-card:focus-visible {
  outline-color: var(--s2a-color-gray-25, #fff);
}

.upcoming-sessions.dark-card .sg-card__time,
.upcoming-sessions.dark-card .sg-card__actions::after,
.section.dark .upcoming-sessions .sg-card__time,
.section.dark .upcoming-sessions .sg-card__actions::after {
  color: #afafaf;
}

.upcoming-sessions.dark-card .sg-card__title,
.upcoming-sessions.dark-card .sg-card__track,
.section.dark .upcoming-sessions .sg-card__title,
.section.dark .upcoming-sessions .sg-card__track {
  color: #f2f2f2;
}

.upcoming-sessions.dark-card .sg-category-badge,
.section.dark .upcoming-sessions .sg-category-badge {
  color: #f2f2f2;
  gap: var(--s2a-spacing-2xs, 4px);
}

.upcoming-sessions.dark-card .sg-card__description,
.section.dark .upcoming-sessions .sg-card__description {
  color: #afafaf;
}

/*
 * sessions-guide.css defines unscoped `.sg-card:is(:hover, :focus-within) .sg-card__*` rules
 * that switch text to a near-black gray-900 on hover/focus. Those rules aren't namespaced to
 * .upcoming-sessions and have the same specificity as our base dark-card color rules above, so
 * on mobile/tablet (where our own hover override below is not yet in effect, since it only
 * exists in the >=1280px block) they can win the cascade and flip our white text to black on
 * hover/touch. Re-assert the dark-card colors with higher specificity so they hold at every
 * breakpoint.
 */
.upcoming-sessions.dark-card .sg-card:is(:hover, :focus-within) .sg-card__title,
.upcoming-sessions.dark-card .sg-card:is(:hover, :focus-within) .sg-card__track,
.section.dark .upcoming-sessions .sg-card:is(:hover, :focus-within) .sg-card__title,
.section.dark .upcoming-sessions .sg-card:is(:hover, :focus-within) .sg-card__track {
  color: #f2f2f2;
}

.upcoming-sessions.dark-card .sg-card:is(:hover, :focus-within) .sg-card__time,
.upcoming-sessions.dark-card .sg-card:is(:hover, :focus-within) .sg-card__actions::after,
.section.dark .upcoming-sessions .sg-card:is(:hover, :focus-within) .sg-card__time,
.section.dark .upcoming-sessions .sg-card:is(:hover, :focus-within) .sg-card__actions::after {
  color: #afafaf;
}

.upcoming-sessions.dark-card .sg-card:is(:hover, :focus-within) .sg-category-badge,
.section.dark .upcoming-sessions .sg-card:is(:hover, :focus-within) .sg-category-badge {
  color: #f2f2f2;
}
/* stylelint-enable no-descending-specificity */

@media (min-width: 1280px) {
  .upcoming-sessions-controls {
    display: flex;
    margin-right: var(--s2a-spacing-lg, 24px);
    flex-shrink: 0;
    align-items: center;
    gap: var(--s2a-spacing-md, 16px);
  }

  .upcoming-sessions[data-few-sessions="true"] .upcoming-sessions-controls {
    display: none;
  }

  /*
   * The track reserves the expanded card height up front and centers cards in it, so a card
   * growing on hover/focus never changes the track's height. Without this the attached
   * (bottom-anchored) carousel grows upward and shoves the heading and arrows around. The
   * negative margin cancels the reserved space at rest so resting spacing is unchanged.
   */
  .upcoming-sessions {
    --upcoming-sessions-card-height: 128px;
    --upcoming-sessions-card-height-expanded: 150px;
  }

  .upcoming-sessions-track {
    min-height: calc(var(--upcoming-sessions-card-height-expanded) + 2 * var(--s2a-spacing-xs, 8px));
    margin-block: calc((var(--upcoming-sessions-card-height) - var(--upcoming-sessions-card-height-expanded)) / 2);
  }

  /*
   * Uniform 24px padding: the body flexes to fill whatever the actions column leaves, and the
   * 24px between body and actions lives on the actions column's padding-left (not the card's
   * gap), so it collapses to 0 with the column at rest. Card width and actions width change by
   * the same 56px over the same transition, so the body (and the title's wrapping) never moves.
   */
  .upcoming-sessions .sg-card {
    flex-direction: row;
    align-items: stretch;
    width: 375px;
    min-height: var(--upcoming-sessions-card-height);
    padding: var(--s2a-spacing-lg, 24px);
    gap: 0;
    border: var(--s2a-border-width-sm, 1px) solid transparent;
  }

  .upcoming-sessions .sg-card:is(:hover, :focus-within) {
    width: 431px;
    min-height: var(--upcoming-sessions-card-height-expanded);
    background: #262626;
    border-color: var(--s2a-color-transparent-white-24, rgb(255 255 255 / 24%));
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
    z-index: 2;
  }

  .upcoming-sessions .sg-card.is-scheduled,
  .upcoming-sessions .sg-card.is-favorited {
    width: 431px;
  }

  .upcoming-sessions .sg-card.is-scheduled:is(:hover, :focus-within),
  .upcoming-sessions .sg-card.is-favorited:is(:hover, :focus-within) {
    min-height: var(--upcoming-sessions-card-height-expanded);
    background: #262626;
    border-color: var(--s2a-color-transparent-white-24, rgb(255 255 255 / 24%));
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
    z-index: 2;
  }

  .upcoming-sessions .sg-card__body {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    gap: var(--s2a-spacing-md, 16px);
  }

  .upcoming-sessions .sg-card__badge-row {
    display: none;
  }

  .upcoming-sessions .sg-card:is(:hover, :focus-within) .sg-card__title {
    color: var(--s2a-color-gray-25, #fff);
  }

  .upcoming-sessions .sg-card__description {
    /* stylelint-disable-next-line value-no-vendor-prefix */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: -16px;
    transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                margin-top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .upcoming-sessions .sg-card:is(:hover, :focus-within) .sg-card__description {
    max-height: 18px;
    opacity: 1;
    margin-top: -8px;
  }

  .upcoming-sessions .sg-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s2a-spacing-lg, 24px);
    margin-top: auto;
    padding-top:0%;
  }

  .upcoming-sessions .sg-card:is(:hover, :focus-within) .sg-card__track {
    color: var(--s2a-color-gray-25, #fff);
  }

  .upcoming-sessions .sg-card:is(:hover, :focus-within) .sg-category-badge {
    color: var(--s2a-color-gray-25, #fff);
  }

  .upcoming-sessions .sg-card__track--footer {
    display: none;
  }

  .upcoming-sessions .sg-card__footer-badge {
    display: contents;
  }

  .upcoming-sessions .sg-card__time {
    margin-left: auto;
  }

  .upcoming-sessions .sg-card:is(:hover, :focus-within) .sg-card__time {
    color: rgb(255 255 255 / 50%);
  }

  .upcoming-sessions .sg-card__actions {
    flex-direction: column;
    width: 0;
    padding-left: 0;
    gap: var(--s2a-spacing-md, 16px);
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
    align-items: center;
    justify-content: flex-start;
    transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                padding-left 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /*
   * .upcoming-sessions-card is repeated to outrank sessions-guide.css's unscoped
   * `.sg-card.is-scheduled:not(.sg-card--on-demand) .sg-card__actions` (same 0,4,0 specificity,
   * loaded later on pages with the Session Guide widget), which otherwise wins only for
   * scheduled cards and swaps in its own 48px width / 16px padding.
   */
  /* stylelint-disable-next-line no-descending-specificity */
  .upcoming-sessions .upcoming-sessions-card.sg-card:is(:hover, :focus-within) .sg-card__actions,
  .upcoming-sessions .upcoming-sessions-card.sg-card.is-scheduled .sg-card__actions,
  .upcoming-sessions .upcoming-sessions-card.sg-card.is-favorited .sg-card__actions {
    width: calc(var(--s2a-spacing-xl, 32px) + var(--s2a-spacing-lg, 24px));
    padding-left: var(--s2a-spacing-lg, 24px);
    opacity: 1;
    pointer-events: auto;
  }

  .upcoming-sessions .sg-card__actions::after {
    display: none;
  }

  /* stylelint-disable no-descending-specificity */
  .upcoming-sessions.dark-card .sg-card,
  .upcoming-sessions.dark-card .sg-card.is-scheduled,
  .upcoming-sessions.dark-card .sg-card.is-favorited,
  .section.dark .upcoming-sessions .sg-card,
  .section.dark .upcoming-sessions .sg-card.is-scheduled,
  .section.dark .upcoming-sessions .sg-card.is-favorited {
    background: rgb(10 10 10 / 35%);
    border: 1px solid #505050;
    backdrop-filter: blur(var(--s2a-blur-sm, 16px));
  }

  .upcoming-sessions.dark-card .sg-card:hover,
  .section.dark .upcoming-sessions .sg-card:hover {
    background: #131313;
    border-color: #505050;
    backdrop-filter: none;
  }
  /* stylelint-enable no-descending-specificity */

  /* stylelint-disable no-descending-specificity */
  .upcoming-sessions.dark-card .sg-card__time,
  .upcoming-sessions.dark-card .sg-card__actions::after,
  .section.dark .upcoming-sessions .sg-card__time,
  .section.dark .upcoming-sessions .sg-card__actions::after {
    color: rgb(255 255 255 / 64%);
  }

  .upcoming-sessions.dark-card .sg-card__title,
  .upcoming-sessions.dark-card .sg-card__track,
  .section.dark .upcoming-sessions .sg-card__title,
  .section.dark .upcoming-sessions .sg-card__track {
    color: var(--s2a-color-gray-25, #fff);
  }

  .upcoming-sessions.dark-card .sg-category-badge,
  .section.dark .upcoming-sessions .sg-category-badge {
    color: var(--s2a-color-gray-25, #fff);
  }
  /* stylelint-enable no-descending-specificity */
}

.upcoming-sessions .sg-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--s2a-border-radius-round, 999px);
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
  transition: background 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
  padding: 0;
}

.upcoming-sessions .sg-icon-btn:disabled {
  opacity: 0.48;
  cursor: default;
  pointer-events: none;
}

.upcoming-sessions .sg-icon-btn:focus-visible {
  outline: 1px solid var(--s2a-color-focus-ring-default, #3b63fb);
  outline-offset: 1px;
}

.upcoming-sessions .sg-icon-btn--md {
  width: var(--s2a-spacing-xl, 32px);
  height: var(--s2a-spacing-xl, 32px);
}

.upcoming-sessions .sg-icon-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
}

.upcoming-sessions .sg-icon-btn--md .sg-icon-btn__icon {
  width: var(--s2a-spacing-md, 16px);
  height: var(--s2a-spacing-md, 16px);
}

.upcoming-sessions .sg-icon-btn__icon > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.upcoming-sessions .sg-icon-btn--solid.sg-icon-btn--on-dark {
  background: var(--s2a-color-background-default, #fff);
  color: var(--s2a-color-content-default, #000);
  border: var(--s2a-border-width-sm, 1px) solid var(--s2a-color-gray-100, #e0e0e0);
}

.upcoming-sessions .sg-icon-btn--solid.sg-icon-btn--on-dark:hover:not(:disabled) {
  background: var(--s2a-color-transparent-white-64, rgb(255 255 255 / 64%));
  border-color: var(--s2a-color-border-inverse, #fff);
}

.upcoming-sessions .sg-icon-btn--solid.sg-icon-btn--on-dark:active:not(:disabled) {
  background: var(--s2a-color-background-default, #fff);
  border-color: transparent;
}

.upcoming-sessions .sg-icon-btn--outlined.sg-icon-btn--on-dark {
  background: transparent;
  border-color: var(--s2a-color-border-inverse, #fff);
  color: var(--s2a-color-content-knockout, #fff);
  backdrop-filter: blur(16px);
}

.upcoming-sessions .sg-icon-btn--outlined.sg-icon-btn--on-dark:hover:not(:disabled) {
  background: var(--s2a-color-transparent-white-12, rgb(255 255 255 / 12%));
}

.upcoming-sessions .sg-icon-btn--outlined.sg-icon-btn--on-dark:active:not(:disabled) {
  background: var(--s2a-color-transparent-white-16, rgb(255 255 255 / 16%));
}

/* stylelint-disable-next-line no-descending-specificity */
.upcoming-sessions .sg-category-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2a-spacing-xs, 8px);
  white-space: nowrap;
}

.upcoming-sessions .sg-category-badge__icon-color {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--s2a-color-gray-1000, #000);
}

.upcoming-sessions .sg-category-badge__icon {
  display: block;
  width: var(--s2a-spacing-md, 16px);
  height: var(--s2a-spacing-md, 16px);
}

.upcoming-sessions .sg-category-badge__label {
  font-family: 'Adobe Clean Spectrum VF', var(--body-font-family);
  font-weight: var(--s2a-font-weight-adobe-clean-medium, 500);
  font-size: var(--s2a-font-size-xs, 12px);
  line-height: var(--s2a-font-line-height-2xs, 16px);
  color: currentcolor;
}

.upcoming-sessions.dark-card .sg-category-badge__icon-color,
.section.dark .upcoming-sessions .sg-category-badge__icon-color {
  color: var(--s2a-color-gray-25, #fff);
}

@media (max-width: 767px) {
  .livestream-layout .upcoming-sessions {
    padding: var(--s2a-spacing-lg) var(--s2a-spacing-lg) var(--s2a-spacing-xl);
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .livestream-layout .upcoming-sessions {
    padding: var(--s2a-spacing-lg) 88px var(--s2a-spacing-xl);
  }
}