.catalogue-section {
  min-height: 100vh;
  padding: 4rem 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--primary);
}

.catalogue-content {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.catalogue-content h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--neutral-light);
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.catalogue-description {
  font-family: var(--font-body);
  font-size: var(--fs-h6);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--support);
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
}

.wrapper {
  width: 90%;
  max-width: 1536px;
  margin-inline: auto;
  position: relative;
  height: 32rem;
  margin-top: 5rem;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}

@keyframes scrollLeft {
  to {
    left: -200px;
  }
}

.item {
  width: 200px;
  height: 54rem;
  border-radius: 5px;
  position: absolute;
  left: max(calc(200px * 6), 100%);
  animation-name: scrollLeft;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: -15s;
}

.item-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.item1 {
  animation-delay: calc(30s / 6 * (6 - 1) * -1);
}

.item2 {
  animation-delay: calc(30s / 6 * (6 - 2) * -1);
}

.item3 {
  animation-delay: calc(30s / 6 * (6 - 3) * -1);
}

.item4 {
  animation-delay: calc(30s / 6 * (6 - 4) * -1);
}

.item5 {
  animation-delay: calc(30s / 6 * (6 - 5) * -1);
}

.item6 {
  animation-delay: calc(30s / 6 * (6 - 6) * -1);
}

@media (max-width: 800px) {
  .catalogue-section {
    padding: 3rem 1.5rem;
  }

  .catalogue-content {
    margin-bottom: 3rem;
    max-width: 90%;
  }

  .catalogue-content h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
  }

  .catalogue-description {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    max-width: 90%;
  }

  .wrapper {
    margin-top: 3rem;
    width: 95%;
  }
}

@media (max-width: 600px) {
  .catalogue-section {
    padding: 2rem 1rem;
    min-height: 90vh;
  }

  .catalogue-content {
    margin-bottom: 2rem;
  }

  .catalogue-content h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }

  .catalogue-description {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    line-height: 1.5;
  }

  .item {
    height: 24rem;
  }

  .wrapper {
    width: 100%;
  }
}