:root {
  --grid: auto / auto max-content;
  --display: grid;
  --padding: 100px;

  --wrapAppStore-grid: auto auto / 1fr auto;
  --qr-grid-area: 1 / 2 / 3 / 2;
  --grid-area-showQr: ;
  --justify-self-qr: ;
  --grid-area-appleStore: ;

  @media only screen and (max-width: 980px) {
    --grid: auto auto / auto;
    --display: inline-grid;
    --padding: 40px;
  }

  @media only screen and (max-width: 490px) {
    --wrapAppStore-grid: auto auto / auto auto;
    --qr-grid-area: 2/2/2/2;
    --showQr-rotate: rotate(45deg);
    --justify-self-qr: end;
    --grid-area-appleStore: 2/1/2/1;
    --grid-area-showQr: 1 / 1 / 1 / 1;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-size: 0.75rem;
}

body {
  padding: var(--padding);
}

h1 {
  display: grid;
  grid: auto auto / auto;
}

h2 {
  display: grid;
  grid: auto auto / auto;
  gap: 10px;
}

#logo {
  align-self: end;
  margin-top: 30px;
  width: 100%;
  max-width: 420px;
}

footer {
  display: var(--display);
  grid: var(--grid);
  gap: 20px;
}

#wrapAppStore {
  display: inline-grid;
  grid: var(--wrapAppStore-grid);
  gap: 10px 20px;
  margin-top: 30px;
}

#showQr {
  place-self: end;
  transform: var(--showQr-rotate);
  transition: transform ease-in-out 350ms;
  grid-area: var(--grid-area-showQr);
}

#qr {
  justify-self: var(--justify-self-qr);
  grid-area: var(--qr-grid-area);
  display: block;
  svg {
    width: 100%;
    max-width: 150px;
    transform: rotate(1deg);
  }
}

#appleStore {
  place-self: end;
  grid-area: var(--grid-area-appleStore);
}