body {
  margin: 20px;
}

.page {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  width: 1660px;
  margin: auto;
}

h1 {
  font-family: Brush Script MT, Brush Script Std, cursive;
}

.examples {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 20px;
  justify-content: center;
}

.examples .col {
  flex-grow: 0;
}

.examples .card {
  width: 400px;
}

@media only screen and (max-width: 1700px) {
  .page {
    width: 1240px;
  }
}

@media only screen and (max-width: 1280px) {
  .page {
    width: 820px;
  }
}

@media only screen and (max-width: 860px) {
  .page {
    width: 400px;
  }
}

@media only screen and (max-width: 440px) {
  .examples {
    flex-direction: column;
  }

  .page {
    width: 100%;
  }

  .examples .card {
    width: 100%;
  }
}