@import "tailwindcss/theme";
@import "../variables/theme.css";
@import "../components/eventCard.css";
@import "../patterns/carousel.css";

.eventNewsCarousel {
  @apply overflow-hidden bg-blue-100;
}

.eventNewsCarousel-container {
  @apply relative grid;

  grid-template-columns: 100%;
  gap: var(--spacing-32);
  padding-block: var(--spacing-sm-xl)
    calc(var(--spacing-80) + var(--spacing-sm-xl));

  @variant md {
    padding-block: var(--spacing-md-xl)
      calc(var(--spacing-80) + var(--spacing-md-xl));
  }

  @variant lg {
    @apply grid-cols-12;

    padding-block: var(--spacing-80);
  }
}

.eventNewsCarousel-header {
  @variant lg {
    @apply col-span-3 col-end-4 grid;

    grid-template-rows: min-content auto;
    gap: var(--spacing-20);
  }
}

.eventNewsCarousel-action {
  @apply absolute w-full;

  bottom: var(--spacing-sm-xl);

  @variant md {
    bottom: var(--spacing-md-xl);
  }

  @variant lg {
    @apply static w-fit;
  }
}

.eventNewsCarousel-carousel {
  width: calc(100% + var(--container-margin) * 2);
  margin-left: calc(var(--container-margin) * -1);

  @variant md {
    width: calc(100% + var(--container-margin-md) * 2);
    margin-left: calc(var(--container-margin-md) * -1);
  }

  @variant lg {
    @apply col-span-9 col-start-4 m-0;

    width: calc(100% + var(--container-margin-lg));
  }
}

.eventNewsCarousel .carousel-list {
  gap: var(--spacing-16);
  width: max-content;
  padding-inline: var(--container-margin);

  @variant md {
    gap: var(--spacing-16);
    padding-inline: var(--container-margin-md);
  }

  @variant lg {
    gap: var(--spacing-20);
    padding-right: var(--container-margin-lg);
    padding-left: 0;
  }
}

.eventNewsCarousel .carousel-list > * {
  width: 240px;
  padding: 2px;

  @variant md {
    width: 254px;
  }

  @variant lg {
    width: 386px;
    margin-left: 2px;
  }

  &:first-child {
    @apply snap-end;
  }

  /* &:last-child {
    @apply snap-start;
  } */
}