/* The copied homepage stylesheet owns all site/container/grid widths.
   These additions label review placements and let embeds have natural heights. */
@font-face {
  font-family: 'Work Sans';
  src: url('./assets/work-sans-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('./assets/work-sans-bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.example-index {
  padding-block: 36px;
}
.example-index h2,
.example-label h2 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.3;
}
.example-index p,
.example-label p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}
.example-index nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 20px;
  font-size: 16px;
}
.example-index a {
  text-underline-offset: 5px;
}
.example-full-section {
  padding-block: var(--section-pad);
  background: var(--color-gray);
}
.example-label {
  margin-bottom: 28px;
}
.example-number-section {
  background: #f2f2f2;
  color: #002856;
}
.example-number-section::before {
  display: none;
}
.example-number-section .numbers-carousel__controls {
  color: #002856;
}
.example-number-section .numbers-carousel__dot {
  border-color: currentColor;
}
.example-number-section .numbers-carousel__dot[aria-current='true'] {
  background: currentColor;
}
.example-number-section .numbers-carousel__dot:hover,
.example-number-section .numbers-carousel__dot:focus-visible {
  border-color: #e7a614;
  background: #e7a614;
}
.example-number-section .number-grid {
  align-items: start;
}
.example-embed {
  min-width: 0;
}
.example-value-column {
  min-width: 0;
}
@media (max-width: 767px) {
  .example-value-column .example-label {
    margin-top: 31px;
  }
  .example-number-section .example-embed {
    flex: 0 0 100%;
  }
}