One tap. Three devices. Pure CSS.

.frame {
  container-type: inline-size;
  aspect-ratio: var(--ratio, 9 / 19.5);
  max-width: var(--max, 320px);
  margin-inline: auto;
  border-radius: var(--radius, 2rem);
  transition: aspect-ratio .5s ease, max-width .5s ease,
              border-radius .5s ease;
}

.frame[data-device="desktop"] { --ratio: 16/10; --max: 100%;  --radius: .75rem; }
.frame[data-device="ipad"]    { --ratio: 4/3;   --max: 90%;   --radius: 1.25rem; }
.frame[data-device="mobile"]  { --ratio: 9/19.5;--max: 260px; --radius: 2rem; }

/* Layout responds to the FRAME size, not the viewport */
.app { display: grid; gap: .5rem; grid-template-columns: 1fr; }

@container (min-width: 520px) {
  .app { grid-template-columns: 160px 1fr; }
  .cards { grid-template-columns: repeat(3, 1fr); }
}
@container (min-width: 780px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
}