@media (max-width: 1024px) {
  section {
    padding-top: 5%;
    width: 90%;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  section {
    padding-top: 5%;
    width: 90%;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  section {
    padding-top: 5%;
    width: 90%;
    margin: 0 auto;
  }

  header h1 {
    font-size: 3.5rem;
    width: 90%;
  }
  header p {
    font-size: 1.3rem;
    width: 70%;
  }
  header button {
    font-size: 1.5rem;
    padding: 15px 25px;
  }
}

@media (max-width: 500px) {
  article {
    width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 455px) {
  article {
    flex: 1 1 300px;
    min-width: 300px;
  }
}

@media (max-width: 425px) {
  section {
    width: 90%;
  }

  header h1 {
    font-size: 3rem;
    padding-bottom: 10%;
  }
  header p {
    width: 90%;
    padding-bottom: 10%;
  }
  header button {
    padding: 10px 20px;
    font-size: 1.5rem;
  }
}

@media (max-width: 375px) {
  article {
    flex: 1 1 250px;
    min-width: 250px;
  }
}

@media (max-width: 320px) {
  header h1 {
    font-size: 2.5rem;
  }
  header p {
    font-size: 1.2rem;
  }
  header button {
    padding: 10px 25px;
    font-size: 1.3rem;
  }
  .s_image,
  .c_image,
  .y_image,
  .h_image,
  .m_image,
  .p_image {
    height: 240px;
  }
}