@import "import";

.mediaCarousel {
  //outline: solid red 1px;
  position: relative;
  width: 100%;

  //height: 305px;
  padding: 0;
  margin-left: 0;

  overflow-x: auto;
  white-space: nowrap;

  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */

  /* 2015 spec - For Firefox, Edge, IE */
  scroll-snap-type: mandatory;
  -ms-scroll-snap-type: mandatory;

  --percent-height: 0.5625;

  --scroll-content: min(calc(min(800px, 90vh) * var(--percent-height)), 100%);
  scroll-snap-points-x: repeat(var(--scroll-content));
  -ms-scroll-snap-points-x: repeat(var(--scroll-content));

  width: 100vw;
  margin-left: calc(var(--spacer-4) * -1);
  padding: 0 var(--spacer-8);

  @include breakpoint(medium) {
    width: 100vw;
    margin-left: calc(-50vw + (var(--max-width-content) * 0.5));
    padding: 0 calc((100vw - var(--scroll-content)) * 0.5);
    gap: 36px;
  }

  &::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */

  > div {
    scroll-snap-align: center;

    min-width: var(--scroll-content);
    min-height: 100px;
    display: flex;
    flex-flow: column nowrap;

    @include breakpoint(medium) {
      min-width: var(--scroll-content);
    }

    > div {
      max-width: var(--scroll-content);
    }
  }
}