@charset "UTF-8";
.comments {
  margin-top: 220px;
  /* Para dispositivos pequenos (smartphones em modo retrato) */
  /* Para dispositivos médios (tablets) */
  /* Para dispositivos grandes (tablets e notebooks maiores) */
  /* Para dispositivos extra grandes (desktops) */
  /* Para telas muito grandes (desktops de alta resolução) */
}
.comments .comments-content {
  width: 100%;
  border-radius: 12px;
  background-color: #EBEBEB;
  height: 200px;
  display: flex;
}
.comments .comments-content .comments-content--left {
  position: relative;
  width: 30%;
}
.comments .comments-content .comments-content--left img {
  position: absolute;
  height: 250px;
  top: -80px;
  left: 30px;
  border-radius: 12px;
}
.comments .comments-content .comments-content--left .comments-content--left---aspas {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 290px;
  top: -30px;
}
.comments .comments-content .comments-content--right {
  width: 70%;
  padding: 0 100px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.comments .comments-content .comments-content--right p {
  font-size: 18px;
}
.comments .comments-content .comments-content--right span {
  font-size: 14px;
  color: #A0A0A0;
}
@media (max-width: 576px) {
  .comments {
    margin-top: 170px;
  }
  .comments .comments-content {
    flex-direction: column;
    height: auto;
  }
  .comments .comments-content .comments-content--left {
    width: 100%;
  }
  .comments .comments-content .comments-content--right {
    width: 100%;
    padding: 20px 30px;
    margin-top: 180px;
  }
}
@media (min-width: 577px) and (max-width: 820px) {
  .comments {
    /* Estilos para telas entre 577px e 768px */
    margin-top: 170px;
  }
  .comments .comments-content {
    flex-direction: column;
    height: auto;
  }
  .comments .comments-content .comments-content--left {
    width: 100%;
  }
  .comments .comments-content .comments-content--right {
    width: 100%;
    padding: 20px 30px;
    margin-top: 180px;
  }
}
@media (min-width: 769px) and (max-width: 992px) {
  .comments {
    /* Estilos para telas entre 769px e 992px */
  }
}
@media (min-width: 993px) and (max-width: 1200px) {
  .comments {
    /* Estilos para telas entre 993px e 1200px */
  }
}
@media (min-width: 1201px) {
  .comments {
    /* Estilos para telas maiores que 1200px */
  }
}

/*# sourceMappingURL=comments.css.map */