:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }/** Typography */
:host {
  /**
   * @prop --bleed: A portion of the Image of the next card is displayed outside the parent width boundary. 
   * Generally should be the parent's `padding-inline-end` (or `padding-right`). Defaults to 0px;
   * @prop --gap: gap between the slides. Defaults to var(--nano-spacing-xl) on large screens, var(--nano-spacing-md) on small screens;
   * @prop --pagination-button-color: The color of the pagination button. Defaults to var(--nano-color-neutral-400);
   * @prop --pagination-button-active: Active color of the pagination button. Defaults to var(--nano-color-primary-1000);
   */
  --bleed: 0px;
  --gap: var(--nano-spacing-xl);
  --pagination-button-color: var(--nano-color-neutral-400);
  --pagination-button-hover: var(--nano-color-primary-700);
  --pagination-button-active: var(--nano-color-primary-1000);
  --peek: calc(var(--bleed) / 2);
  --slide-width: calc((50% + (var(--gap) / 2)) - var(--peek));
  display: block;
  position: relative;
  margin-inline: 0 calc(var(--bleed) * -1);
  container-type: inline-size;
  overflow: hidden;
}

.base ::slotted(nano-slide), .base::slotted(nano-slide) {
  --img-opacity: calc(1 - max((var(--distance) - 50) / 30, 0));
  --text-opacity: calc(1 - max((var(--distance) - 50) / 15, 0));
  display: block;
  text-align: unset;
  min-block-size: auto;
  inline-size: var(--slide-width);
  padding-inline-end: var(--gap);
}
.base nano-slides {
  overflow: visible;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) calc(100% - var(--bleed)), rgba(0, 0, 0, 0) 100%);
}
.base nano-slides[ready]::part(slide-container) {
  flex-flow: column wrap;
  justify-content: flex-start;
}
.base nano-slides::part(slide-viewport) {
  flex: auto;
}
.base nano-slides::part(navigation-button--previous) {
  display: none;
}
.base nano-slides::part(navigation-button--next) {
  transform: none;
  block-size: 100%;
  inline-size: calc(var(--peek) + var(--gap));
  inset-inline-end: 0;
  inset-block-start: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}
.base .header {
  max-inline-size: calc(100% - var(--bleed));
  display: flex;
  gap: var(--nano-spacing-md);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--gap);
}
.base .title {
  font-weight: var(--nano-font-weight-normal);
  font-size: var(--nano-font-size-xl);
  line-height: var(--nano-line-height-denser);
  text-wrap: balance;
  line-height: 1;
}
.base .pagination {
  display: inline-flex;
  gap: var(--nano-spacing-md);
}
.base .pagination-btn {
  all: unset;
  inline-size: 1.25rem;
  block-size: 0.375rem;
  margin-block: 0;
  cursor: pointer;
  background: var(--pagination-button-color);
  position: relative;
}
.base .pagination-btn::after {
  content: "";
  position: absolute;
  inset: -1rem -0.625rem;
}
.base .pagination-btn:focus-visible {
  outline: var(--nano-focus-ring);
  outline-offset: var(--nano-focus-ring-offset);
  z-index: 1;
}
.base .pagination-btn:hover {
  background: var(--pagination-button-hover);
}
.base .pagination-btn:active {
  background: var(--pagination-button-active);
}
.base .pagination-btn__label {
  border: 0;
  clip: rect(0 0 0 0);
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  inline-size: 1px;
}
.base .pagination-btn--active {
  background: var(--pagination-button-active);
}
@container (width < 615px) {
  .base {
    --gap: var(--nano-spacing-md);
    --peek: var(--bleed);
    --slide-width: calc((100% + var(--gap)) - var(--peek));
  }
  .base ::slotted(nano-slide) {
    --img-opacity: calc(1 - max((var(--distance) - 30) / 5, 0));
    --text-opacity: calc(1 - max((var(--distance) - 30) / 3, 0));
  }
  .base .header {
    flex-direction: column;
    align-items: start;
  }
  .base .pagination {
    transform: translateY(-50%);
  }
}