input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.custom-shape-divider-top-1692767000 {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-top-1692767000 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 150px;
  /* TODO: fix the border made it with drop-shadow */
  filter: drop-shadow(5px 5px 0px #ffffff);
}

.group:hover > span.badge-container {
  @apply first:min-h-6 items-center justify-center transition-all transform duration-1000;
}

.group:hover > span.badge-container > span.badge-content {
  @apply not-sr-only transition-all transform duration-1000;
}

.list{
  @apply grid grid-flow-col auto-cols-min items-center justify-between gap-3 overflow-x-auto snap-x snap-mandatory;
}

.list-container {
  @apply min-w-80 md:min-w-[420px];
}

.image-container img:not(:first-child) {
  @apply opacity-60
}

.image-container {
  position: relative;
  width: 100%;
  height: auto;
}

/*
* Navigation styles
*/
.nav-item {
  cursor: pointer;
}

.nav-item:after {
    content: '';
    @apply  block border border-orange-600 transition-transform ease-in-out duration-200 scale-x-0;
}

.nav-item:hover:after {
  @apply  scale-x-100;
}