@media only screen and (max-device-width: 900px) {
  body {
    min-width: 320px;
    background-color: var(--white);
  }

  header {
    padding: 1rem;
  }

  h2 {
    font-family: "Nunito", sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 123.077% */
    letter-spacing: 0.1px;
  }

  h3 {
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 120% */
    letter-spacing: 0.1px;
  }

  .logo-container {
    width: auto;
  }

  .logo {
    height: 64px;
    width: 64px;
    aspect-ratio: 1/1;
  }

  .help-icon-button, .help-icon-button-img {
    height: 40px;
    width: 40px;
    aspect-ratio: 1/1;
  }

  .main-container {
    padding: 1rem;
    width: 100%;
  }

  .split-container {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .app-promotion-block,
  .cylinder-block {
    width: auto;
    max-width: 100%;
    padding: 0.5rem;
  }

  .app-promotion-block {
    /* 3rem visually, but since we got a 1rem gap + .5rem padding on both cards, we set only 1rem */
    margin-top: 1rem;
  }

  .image-container img {
    max-width: 100%;
    height: auto;
  }

  .desktop {
    display: none;
  }
}