/* CSS Document */



.slider {
  max-width: 55vw;
  background: #fff;
  border-radius: 15px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  margin: auto;
}

.slides {
  display: flex;
  transition: 0.5s;
}

.slide {
  min-width: 90%;
  display: flex;
  gap: 40px;
  align-items: center;
  opacity: 0;
  position: absolute;
  transition: 0.5s;
}

.slide.active {
  opacity: 1;
  position: relative;
}

.slide img {
  width: 380px;
  height: 280px;
  object-fit: cover;
  border-radius: 15px;
	margin-left: 40px;
}

.content {
  max-width: 500px;
}

h2 {
  color: #124b9b;
  font-size: 32px;
}

p {
  margin: 15px 0;
  line-height: 1.5;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tags span {
  background: #ef3b42;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 14px;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 40px;
  cursor: pointer;
  color: #bbb;
}

.left { left: 10px; }
.right { right: 10px; }

@media (max-width: 768px) {

  .slider {
    max-width: 100vw;
    padding: 20px;
  }

  .slides {
    display: flex;
    transition: transform 0.6s ease;
  }

  /* no mobile não usamos active nem position absolute */
  .slide {
    position: relative;
    opacity: 1;
    min-width: 100%;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .slide.active {
    opacity: 1;
  }

  .slide img {
    width: 100%;
    height: 220px;
    margin-left: 0;
  }

  .arrow {
    display: none;
  }
}
@media (max-width: 768px) {
  .slide {
    flex-direction: column;
    text-align: center;
  }

  .slide img {
    width: 100%;
    height: 220px;
    margin-left: 0;
  }
}

.slider {
  touch-action: none;
}