.brand-carousel {
  display: flex;
  padding: 30px 0;
  justify-content: center;

  z-index: 2;
  background-color: #353839;
  position: relative;
}

.carousel-wrapper {
  position: relative;
  width: 60vw;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.carousel {
  display: flex;
  width: max-content;
  animation: slideLeft 20s linear infinite;
}

.carousel img {
  height: 80px;
  width: 80px;
  margin: 0 10px;
  object-fit: contain;
  flex-shrink: 0;
  transition: opacity 0.5s ease-in-out;
}

@keyframes slideLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.brand-carousel::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 80%;
  height: 2px;
  background: #f0f0f0;
  border-radius: 2rem;
}