.small-showcase-section {
  min-height: 30vh;
  padding: 4rem 2rem;
  background: var(--neutral-light);
}

.small-showcase-container {
  max-width: 75rem;
  margin: 0 auto;
}

.showcase-item {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.showcase-img-wrapper {
  flex: 0 0 48%;
  max-width: 48%;
  height: 35rem;
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
}

.showcase-img-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-pink);
  z-index: 2;
  transform: translateY(0);
  transition: transform 1s ease-out;
}

/* Revealed state - curtain drops down */
.showcase-img-wrapper.revealed::before {
  transform: translateY(100%);
}

.showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .small-showcase-section {
    padding: 3.5rem 2rem;
  }

  .showcase-item {
    gap: 1.75rem;
  }

  .showcase-img-wrapper {
    flex: 0 0 48%;
    max-width: 48%;
    height: 32rem;
  }
}

@media (max-width: 900px) {
  .small-showcase-section {
    padding: 3rem 1.75rem;
  }

  .showcase-item {
    gap: 1.5rem;
  }

  .showcase-img-wrapper {
    flex: 0 0 48%;
    max-width: 48%;
    height: 28rem;
  }
}

@media (max-width: 768px) {
  .small-showcase-section {
    min-height: 25vh;
    padding: 2.5rem 1.5rem;
  }

  .showcase-item {
    gap: 1.25rem;
  }

  .showcase-img-wrapper {
    flex: 0 0 calc(50% - 0.625rem);
    max-width: calc(50% - 0.625rem);
    height: 22rem;
  }
}

@media (max-width: 480px) {
  .small-showcase-section {
    min-height: 20vh;
    padding: 2rem 1.25rem;
  }

  .showcase-item {
    gap: 1rem;
  }

  .showcase-img-wrapper {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
    height: 18rem;
  }

  .showcase-img-wrapper:nth-child(2) .showcase-img {
    transform: scale(1.15);
    object-position: 10% center;
  }

  .showcase-img-wrapper:nth-child(3) .showcase-img {
    transform: scale(1.15);
    object-position: 20% center;
  }

  .showcase-img-wrapper:nth-child(4) .showcase-img {
    transform: scale(1.15);
    object-position: 100% center;
  }
}

@media (max-width: 375px) {
  .small-showcase-section {
    padding: 1.75rem 1rem;
  }

  .showcase-item {
    gap: 1rem;
    flex-direction: column;
  }

  .showcase-img-wrapper {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    height: 20rem;
  }

  .showcase-img-wrapper:nth-child(2) .showcase-img,
  .showcase-img-wrapper:nth-child(3) .showcase-img,
  .showcase-img-wrapper:nth-child(4) .showcase-img {
    transform: none;
    object-position: center;
  }
}