#feedbacks {
  background: linear-gradient(to bottom left, #000000 21%, #666666 100%);
  background-position: center;
  background-size: cover;
}

.superior {
  display: grid;
  justify-content: center;
  align-items: center;
  place-items: center;
  grid-template-columns: 30% 80% 30%;
  grid-template-rows: 1fr 1fr;
}

.titulo {
  grid-column: 1/4;
}

.superior h2 {
  color: var(--orange-text);
  font-size: 27px;
  font-weight: 300;
  margin-top: 3rem;
}

.superior img {
  width: 150px;
  height: 130px;
}

.feedbacks {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.box_feedbacks {
  width: 400px;
  height: 480px;
  border-radius: 15px;
  background-color: var(--gray-text);
  display: flex;
  justify-content: center;
  align-items: center;
}

.box_feedbacks img {
  border-radius: 10px;
  width: 350px;
  height: 440px;
}


@media screen and (min-width: 1100px) and (max-width: 1250px){
    .superior{
    grid-template-columns: 20% 80% 20%;
}

.superior h2{
    font-size: 20px;
}

.superior img{
    width: 90px;
    height: 70px;
}

.box_feedbacks{
    width: 270px;
    height: 330px;
}

.box_feedbacks img{
    width: 250px;
    height: 310px;
}
}

@media screen and (min-width: 1251px) and (max-width: 1400px){
    .superior{
    grid-template-columns: 25% 80% 25%;
}

.superior h2{
    font-size: 21px;
}

.superior img{
    width: 100px;
    height: 80px;
}

.box_feedbacks{
    width: 320px;
    height: 345px;
}

.box_feedbacks img{
    width: 280px;
    height: 315px;
}
}

@media screen and (min-width: 1400px) and (max-width: 1500px){
        .superior{
    grid-template-columns: 25% 75% 25%;
}

.superior h2{
    font-size: 26px;
}

.superior img{
    width: 130px;
    height: 110px;
}

.box_feedbacks{
    width: 370px;
    height: 460px;
}

.box_feedbacks img{
    width: 320px;
    height: 430px;
}
}

/* ============== MOBILE ======================= */


@media (max-width: 768px) {

    .superior{
  grid-template-columns: 25% 65% 25%;

    }
.superior h2 {
    text-align: center;
  font-size: 13px;
  width: 230px;
  font-weight: 600;
}

    .superior img {
  width: 60px;
  height: 40px;
}

    
  .feedbacks_container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }

.feedbacks_wrapper {
  width: 100%;          
  max-width: 360px;
  overflow-x: scroll;  
  scroll-behavior: smooth;
  scrollbar-width: auto;  
  -ms-overflow-style: auto; 
  border-radius: 20px;
}


.feedbacks_wrapper::-webkit-scrollbar {
  height: 8px; 
}

.feedbacks_wrapper::-webkit-scrollbar-thumb {
  background-color: var(--orange-text); 
  border-radius: 4px;
}

.feedbacks_wrapper::-webkit-scrollbar-track {
  background-color:  var(--orange-text); 
}


  .feedbacks {
    display: flex;
    gap: 20px;
    width: max-content;
  }

  .box_feedbacks {
    flex: 0 0 auto;             
    width: 330px;
    height: 370px;
    scroll-snap-align: center;  
  }

  .box_feedbacks img {
    width: 280px;
    height: 330px;
  }
}