@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

.media-scroller {
  margin-top: 40px;
  --_spacer: var(--size-3);
  display: grid;
  gap: var(--_spacer);
  grid-auto-flow: column;
  grid-auto-columns: 21%;

  padding: 0 var(--_spacer) var(--_spacer);

  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.media-scroller--with-groups {
  grid-auto-columns: 80%;
}

.media-group {
  display: grid;
  gap: var(--_spacer);
  grid-auto-flow: column;
}

.media-element {
  display: grid;
  grid-template-rows: -webkit-min-content;
  grid-template-rows: min-content;
  gap: var(--_spacer);
  padding: var(--_spacer);
  background: white;
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
}

.media-element > img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  -o-object-fit: cover;
     object-fit: cover;
}

.snaps-inline {
  -ms-scroll-snap-type: inline mandatory;
      scroll-snap-type: inline mandatory;
  scroll-padding-inline: var(--_spacer, 1rem);
 background-color:#e3deee;
 
}

.snaps-inline > * {
  scroll-snap-align: start;
}

/* general styling */



.flow {
  display: grid;
  gap: var(--size-3);
}

.page-header {
  padding-block: var(--size-9);
  -webkit-margin-after: var(--size-9);
          margin-block-end: var(--size-9);
  background: var(--gradient-16);
  color: var(--gray-0);
  box-shadow: var(--shadow-2);
}

.page-title {
  font-size: var(--font-size-fluid-3);
}

.page-subtitle {
  font-size: var(--font-size-fluid-1);
}

.section-title {
  -webkit-padding-start: var(--size-6);
          padding-inline-start: var(--size-6);
  margin-block: var(--size-9) var(--size-3);
}