.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
}

.card {
  flex: 1 1 calc(25% - 16px); /* 4 colunas */
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  padding: 16px;
  box-sizing: border-box;
}

.card:nth-of-type(1) {
  flex: 1 1 calc(100% - 16px); /* Se ajusta para tela inteira em mobile */
}

.card:nth-of-type(2) {
  flex: 1 1 calc(100% - 16px); /* Se ajusta para tela inteira em mobile */
}

.card:nth-of-type(3) {
  flex: 1 1 calc(100% - 16px); /* Se ajusta para tela inteira em mobile */
}

.card:nth-of-type(4) {
  flex: 1 1 calc(100% - 16px); /* Se ajusta para tela inteira em mobile */
}

/* Media Queries para responsividade */
@media (max-width: 1024px) {
  .container {
    flex-direction: column; /* Empilha verticalmente em telas menores que 1024px */
  }

  .card {
    flex: 1 1 100%; /* Cada card ocupa 100% da largura */
  }
}

@media (min-width: 1025px) {
  .container {
    flex-direction: row; /* Organiza os cards em linha em telas maiores que 1024px */
  }

  .card {
    flex: 1 1 calc(25% - 16px); /* Organiza em 4 colunas */
  }
}