.gradient-before::before {
  content: "";
  position: relative;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3), transparent);
  z-index: 1;
  border-radius: 0.5rem;
  pointer-events: none;
}

.clip-base {
  position: relative;
  width: 555px;
  height: 320px;
  object-fit: cover;
}

/* Estilos móviles por defecto */
.clip-vs-left {
  clip-path: polygon(0 0, 100% 0, 50% 100%, 0% 100%);
  position: relative;
  height: 230px;
  margin-left: 0%;
  max-height: 230px;
  overflow: hidden;
}

.clip-vs-right {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
  position: relative;
  height: 230px;
  margin-left: -31%;
  max-height: 230px;
  overflow: hidden;
}

.bg-fade-bottom {
  background: linear-gradient(to bottom, #1e293b 25%, transparent);
}

/* Móviles */
@media (min-width: 640px) {
  .clip-vs-left,
  .clip-vs-right {
    height: 400px;
    max-height: 400px;
  }
}

/* Estilos para escritorio */
@media (min-width: 768px) {
  .clip-vs-left {
    height: 400px;
    max-height: 400px;
  }

  .clip-vs-right {
    height: 400px;
    max-height: 400px;
  }
}


/* Para ocultar la scrollbar (opcional) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}