/* For devices with a width up to 600px (small devices) */
@media (max-width: 600px) {
  body {
    font-size: 16px;
    padding: 10px;
  }
  .container {
    width: 100%;
    padding: 0 10px;
  }
}

/* For devices with a width from 601px to 1024px (tablets) */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    font-size: 18px;
    padding: 15px;
  }
  .container {
    width: 90%;
    margin: 0 auto;
  }
}

/* For devices larger than 1024px (desktops) */
@media (min-width: 1025px) {
  body {
    font-size: 20px;
    padding: 20px;
  }
  .container {
    width: 80%;
    margin: 0 auto;
  }
}

/* Flexible images and media */
img, video {
  max-width: 100%;
  height: auto;
}