header{
  background-image: url('../assets/backgrounds/agents-header.png');
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
header .banner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 7rem 20rem 22.2rem 20rem;
}
header .banner h2 {
  font-weight: 900;
  font-size: 7rem;
  line-height: 7.8rem;
  color: var(--white);
  text-shadow: 2px 5px 15px rgba(0, 0, 0, 0.25);
  margin-bottom: 1.6rem;
}
header .banner p {
  color: var(--white);
  text-shadow: 2px 5px 15px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 900;
  max-width: 40rem;
  margin-bottom: 7rem;
}
main {
  padding: 0 20rem;
  margin-top: -10rem;
}

main .filter {
  margin-bottom: 5rem;
}

main .filter h3{
  font-weight: 900;
  font-size: 3rem;
  line-height: 4rem;
  color: var(--blue-dark);
  margin-bottom: 1rem;
}

main .filter select{
  width: 37rem;
  border: none;
  background-color: var(--grey-light);
  padding: 0.6rem  6rem 0.6rem 6rem ;
  color: var(--grey);
  font-size: 2rem;
  line-height: 2.4rem;

  -webkit-appearance: none;
  -moz-appearance: none; 
  appearance: none;
  background-image: url('../assets/icons/arrow-down.svg');
  background-repeat: no-repeat;
  background-position: 2.5rem center;
  
}

main .agents{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  row-gap: 3rem;
  margin-bottom: 5rem;

}

main .agents .agent{
  border: solid 3px var(--red);
  border-radius: 0px 10rem;
  text-align: justify;
  padding: .8rem 4.8rem 2.4rem 4.8rem;
}

main .agents .agent h4{
  font-size: 2rem;
  line-height: 4rem;
  color: var(--blue-dark);
  margin-bottom: 1.6rem;
  padding-right: 4rem;
}

main .agents .agent p{
  font-size: 1.6rem;
  line-height: 2.6rem;
  color: var(--grey);
}

main .agents .agent p strong{
  font-weight: bold;
}

main .agents .error {
  font-size: 2.4rem;
}
main .agents .error strong{
  font-size: 2.8rem;
  color: var(--red);
}

/* MEDIAS QUERY */

/* 4k - 2560px */
@media (min-width: 2000px){
  header .banner {
    padding: 10rem 40rem 30rem 40rem;
  }

  header .banner h2 {
    font-size: 8rem;
    line-height: 8.8rem;
    margin-bottom: 2.6rem;
  }
  header .banner p {
    font-size: 2.4rem;
    line-height: 3.4rem;
    max-width: 100rem;
  }
  main {
    padding: 0 40rem;
  }
  main .filter h3{
    font-size: 4rem;
    line-height: 4.8rem;
    margin-bottom: 2rem;
  }
  main .filter select{
    width: 42rem;
    padding: 1.2rem  6rem 1.2rem 6rem ;
    font-size: 2.4rem;
    line-height: 2.4rem;
  }
  main .filter select option{
    font-size: 1.2rem;
    line-height: 2.4rem;
  }
  main .agents .agent{
    padding: 1.6rem 4.8rem 4.8rem 4.8rem;
  }
  main .agents .agent h4{
    font-size: 3rem;
    line-height: 4rem;
  }
  main .agents .agent p{
    font-size: 2.4rem;
    line-height: 2.8rem;
    margin-bottom: 1rem;
  }
  main .agents .error {
    font-size: 4.8rem;
  }
  main .agents .error strong{
    font-size: 5.6rem;
  }
  
}

/* Laptop L - 1440px */
/* CÓDIGO ORIGINAL */

/* Laptop - 1024px */
@media (max-width: 1200px) {
  header .banner {
    padding: 2.5rem 10rem 22.2rem 10rem;
  }
  main {
    padding: 0 10rem;
  }
  main .agents{
    grid-template-columns: 1fr;  
  }
}

/* Tablet - 768px */
@media (max-width: 820px) {
  header .banner {
    padding: 2.5rem 5rem 22.2rem 5rem;
  }
  main {
    padding: 0 5rem;
  }
  main .agents{
    grid-template-columns: 1fr;  
  }
}

/* Mobile L - 425px */
@media (max-width: 680px) {
  header .banner {
    padding: 5rem 10% 20rem 10%;
    text-align: center;
  }
  header .banner h2 {
    font-size: 4rem;
    line-height: normal;
  }
  header .banner p {
    font-size: 1.6rem;
  }
  main{
    padding: 0 10%;
    margin-top: -5rem;
  }
  main .filter select{
    width: 100%;
  }
  main .agents .agent h4{
    line-height: 2.4rem;
  }
}