* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #ffffff;
}

/* контейнер */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  background: rgb(238, 255, 144);
  padding: 20px;
  border-radius: 30px;

  max-width: 1100px;
  margin: 30px auto;
}

/* общий вид карточек */
.card, .card1, .card2, .card3, .card4, .card5, .card6, .card7 {
  padding: 18px 16px;
  margin: 10px 0;
  border-radius: 24px;
  width: 100%;
  max-width: 900px;
}

/* цвета */
.card  { background: #fff; color: #000; }
.card1 { background: rgb(0, 0, 0); color: #fff; }
.card2 { background: rgb(8, 0, 255); color: #fff; } .card3, .card4, .card5, .card6, .card7 {
  background: rgb(136, 136, 136);
  color: #fff;
}

/* ВАЖНО: приводим заголовки и подзаголовки к норме */
.card h1, .card1 h1, .card2 h1, .card3 h1, .card4 h1, .card5 h1, .card6 h1, .card7 h1,
.card .title, .card1 .title, .card2 .title, .card3 .title, .card4 .title, .card5 .title, .card6 .title, .card7 .title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
}

.card h3, .card1 h3, .card2 h3, .card3 h3, .card4 h3, .card5 h3, .card6 h3, .card7 h3,
.card .sub, .card1 .sub, .card2 .sub, .card3 .sub, .card4 .sub, .card5 .sub, .card6 .sub, .card7 .sub {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  opacity: 0.95;
}

/* подпись внизу сайта */
body > h1 {
  text-align: center;
  margin: 18px 12px;
  font-size: 18px;
}

/* адаптив */
@media (max-width: 768px) {
  .container {
    margin: 10px;
    padding: 16px;
  }

  .card, .card1, .card2, .card3, .card4, .card5, .card6, .card7 {
    border-radius: 18px;
    padding: 14px 12px;
  }

  .card h1, .card1 h1, .card2 h1, .card3 h1, .card4 h1, .card5 h1, .card6 h1, .card7 h1,
  .card .title, .card1 .title {
    font-size: 18px;
  }

  .card h3, .card1 h3, .card2 h3, .card3 h3, .card4 h3, .card5 h3, .card6 h3, .card7 h3,
  .card .sub, .card1 .sub {
    font-size: 14px;
  }
}