main {
    margin: 100px;
  }

  h1 {
    margin: 30px 0;
    font-family: "Luckiest Guy";
  }

  .descricao {
    text-align: center;
    margin-bottom: 50px;
    font-size: 20px;
  }

  .destaque {
    margin: 50px;
  }

  .cards {
    display: flex;
    flex-direction: column;
    margin: 20px;
    padding: 20px;
  }

  .cards-line {
    display: flex;
    margin: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .card{
    margin: 20px;
  }

  .card-title {
    color: black;
    font-family: "Luckiest Guy";
    margin-bottom: 20px;
  }

  .card-text {
    color: black;
  }

  .card-destaque {
    display: flex;
    border: 3px solid #FFCB42;
    border-radius: 25px;
    margin-left: 50px;
    margin-right: 50px;
    padding: 15px;
    background-color: #fff;
  }

  .card-destaque-img {
    height: 400px;
    width: 600px;
    border-radius: 15px;
  }

  .card-destaque-conteudo {
    padding-left: 20px;
    padding-right: 20px;
  }

  .btn-modificador {
    background-color: var(--palette-blue);
    border-color: var(--palette-blue);
    animation: wiggle 2.2s linear infinite;
  }
  
  /* Tablet */
  @media screen and (min-width: 768px) and (max-width: 1023px){
    main {
      margin: 100px 50px;
    }

    .card-destaque {
      flex-direction: column;
      margin: 50px;
    }

    .destaque {
      margin: 50px;
    }

    .card-destaque-img {
      height: 100%;
      width: 100%;
      border-radius: 15px;
      margin-bottom: 30px;
    }
  }
  
  /* Telas maiores */
  @media screen and (min-width: 1024px){
    .card-destaque-img {
      height: 100%;
      width: 60%;
      border-radius: 15px;
    }
  }

  /* Telas menores */
  @media screen and (max-width: 767px){
    main {
      margin: 100px 30px;
    }

    .destaque {
      margin: 0px;
      padding: 0px;
    }
    
    .cards{
      margin: 0px;
      padding: 0.5rem;
    }

    .card-destaque {
      flex-direction: column;
      margin: 30px;
    }

    .card-destaque-img {
      height: 100%;
      width: 100%;
      border-radius: 15px;
      margin-bottom: 30px;
    }
  }

  /* Animação do botão */
@keyframes wiggle {
  0%,
  10% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(-10deg);
  }
  20% {
    transform: rotate(5deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  30% {
    transform: rotate(5deg);
  }
  35% {
    transform: rotate(-5deg);
  }
  40%,
  100% {
    transform: rotate(0);
  }
}