/* XXL */
@media (max-width: 1399.98px) {
  #cards {
    .atts {
      .data {
        margin-top: 125px;
        margin-left: 295px;
      }
      .att {
        & p {
          height: 60px;
        }
      }
    }
  }
}

/* XL */
@media (max-width: 1199.98px) {
  #header {
    .btn {
      padding: 10px 18px;
    }
    .menu-btn {
      width: 40px;
      height: 40px;
    }
  }

  #cards {
    .atts {
      .data {
        margin-top: 135px;
        margin-left: 235px;
      }
      .att {
        & p {
          height: 70px;
        }
      }
    }
  }
}

/* LG */
@media (max-width: 991.98px) {
  #header {
    background: linear-gradient(
      180deg,
      rgba(0, 42, 82, 0.3) 0%,
      rgba(20, 20, 20, 0) 30%
    );
  }

  #banner {
    & h1 {
      max-width: 100%;
    }
  }

  #info {
    .img {
      width: 200px;
      height: auto;

      & img {
        width: 100%;
        height: 100%;
      }
    }

    .classes {
      gap: 16px;

      & img {
        width: 50px;
      }
    }
  }
  #cards {
    .discord {
      background: linear-gradient(
        -180deg,
        #4735b7 0%,
        #654cff 60.62%,
        #7763f2 100%
      );

      & a {
        padding: 10px 14px;
        border-radius: 5px;
        background: #fff;
        color: black;
      }

      & img {
        width: 50px;
        height: 50px;
      }

      & h3 {
        text-align: center;
      }
    }
    .itens {
      .item {
        & p {
          height: 80px;
        }
      }
    }

    .atts {
      .data {
        margin-top: 105px;
        margin-left: 655px;
      }
      .att {
        & p {
          height: 40px;
        }
      }
    }
  }
}

/* MD */
@media (max-width: 767.98px) {
  #cards {
    .itens {
      .item {
        & p {
          height: 100px;
        }
      }
    }

    .atts {
      .data {
        margin-top: 105px;
        margin-left: 475px;
      }
    }
  }
}

/* SM */
@media (max-width: 575.98px) {
  #banner {
    & h1 {
      text-align: center;
    }

    & a:not(.social) {
      padding: 8px 22px;

      .banner-img {
        height: 400px;
      }
    }
  }

  #cards {
    .atts {
      .data {
        margin-top: 10px;
        margin-left: 30px;
      }

      & a:hover {
        transform: none;
      }

      .att {
        & p {
          height: 50px;
        }
      }
    }
  }

  #login-page {
    & main {
      & section {
        .container {
          .contain {
            height: inherit;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .row {
            margin-top: -120px;
            height: max-content;
            gap: 32px;
          }
        }
      }
    }
  }
}

@media (max-width: 419.98px) {
  #cards {
    .atts {
      .att {
        & p {
          height: 60px;
        }
      }
    }
  }
}

/* XS */
@media (max-width: 349.98px) {
  #header {
    .logo-img {
      align-items: center;
      display: flex;
      min-width: 100px;
      & img {
        width: 100%;
        height: auto;
      }
    }
  }
  #info {
    .classes {
      & img {
        width: 40px;
      }
    }
  }

  #cards {
    .itens {
      .item {
        & p {
          height: 120px;
        }
      }
    }
    .atts {
      .att {
        & p {
          height: 75px;
        }
      }
    }
  }
}