*{
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
    color: rgb(203 213 225);
}
@keyframes animate-in-and-out-bottom {
    entry 0%  {
      opacity: 0;
      transform: translateY(100%);
      transform: scale(0.7);
  }
  entry 100%  {
      opacity: 1;
      transform: translateY(0);
      transform: scale(1);
  }
  exit 0% {
      opacity: 1;
      transform: translateY(0);
      transform: scale(1);
  }
  exit 100% {
      opacity: 0;
      transform: translateY(-100%);
      transform: scale(0.7);
  }
}
@keyframes animate-in-and-out-text {
    entry 0%  {
      opacity: 0;
  }
  entry 100%  {
      opacity: 1;
  }
  exit 0% {
      opacity: 1;
  }
  exit 100% {
      opacity: 0;
  }
}
@keyframes animate-in-and-out-premio {
    entry 0%  {
        opacity: 0;
        transform: scale(0);
        transform: rotate(12deg);
    }
    entry 10%  {
      opacity: 0;
      transform: scale(0);
      transform: rotate(12deg);
  }
  entry 100%  {
      opacity: 1;
      transform: scale(1);
      transform: rotate(0deg);
  }
  exit 0% {
      opacity: 1;
      transform: scale(1);
      transform: rotate(0deg);
  }
  exit 90% {
    opacity: 0;
    transform: scale(0);
    transform: rotate(-12deg);
}
  exit 100% {
      opacity: 0;
      transform: scale(0);
      transform: rotate(-12deg);
  }
}
@keyframes animate-in-and-out-left {
  entry 0%  {
      opacity: 0; transform: translateX(100%);
  }
  entry 100%  {
      opacity: 1; transform: translateX(0);
  }
  exit 0% {
      opacity: 1; transform: translateX(0);
  }
  exit 100% {
      opacity: 0; transform: translateX(-50%);
  }
}
@keyframes animate-in-and-out-right {
  entry 0%  {
      opacity: 0; transform: translateX(-100%);
  }
  entry 100%  {
      opacity: 1; transform: translateX(0);
  }
  exit 0% {
      opacity: 1; transform: translateX(0);
  }
  exit 100% {
      opacity: 0; transform: translateX(50%);
  }
}

.revealing-bottom, .revealing-left, .revealing-right{
  animation: linear animate-in-and-out-bottom;
  animation-timeline: view();
}
.revealing-text{
  animation: linear animate-in-and-out-text;
  animation-timeline: view();
}


@media (min-width: 765px) {
  .revealing-right {
      animation: linear animate-in-and-out-right;
      animation-timeline: view();
  }
  .revealing-left {
      animation: linear animate-in-and-out-left;
      animation-timeline: view();
  }
    &::before,
    &::after {
        width: 200px;
    }
    .revealing-premio{
        animation: linear animate-in-and-out-premio;
        animation-timeline: view();
      }
}

@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-200px * 24 + 145px))}
}

.slider {
	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
	height: 136px;
	margin: auto;
	overflow:hidden;
	position: relative;
	
	&::before,
	&::after {
		background: linear-gradient(to right,  #111827 0%,rgba(255,255,255,0) 100%);
		content: "";
		height: 136px;
        width: 70px;
		position: absolute;
		z-index: 23;
	}
	
	&::after {
		right: 0;
		top: 0;
		transform: rotateZ(180deg);
	}

	&::before {
		left: 0;
		top: 0;
	}
	
	.slide-track {
		animation: scroll 40s linear infinite;
		display: flex;
        gap: 10px;
		width: calc(200px * 30 + 290px);
	}
	
	.slide {
		height: 136px;
        border-radius: 16px;
        overflow: hidden;
	}
}