/* desktop */
@media only screen and (min-width: 933px) {
  .desktop { display: block; }
  .tablet-landscape, .tablet-portrait, .phone-landscape, .phone-portrait { display: none; }

  .logo-github {
    width: 10vw;
    height: auto;  /* maintain aspect ratio */
  }

  .logo-apple {
    width: 8vw;
    height: auto;
  }

  /* display portrait/horizontal imagery when iDevice rotated (respectively) */
  /* workaround : force portrait image on larger screens */
  .orientation-wrapper .framed-wrapper .orientation-image .img-portrait  { display: block;  }
  .orientation-wrapper .framed-wrapper .orientation-image .img-landscape { display: none; }

  /* maintain portrait aspect ratio */
  .orientation-wrapper {
    max-width: min(420px, 90vw);
  }
}

/* tablet : landscape */
@media only screen
  and (min-width: 768px)
  and (max-width: 1366px)
  and (orientation: landscape)
  and (hover: none)
  and (pointer: coarse) {

  .tablet-landscape { display: block; }
  .desktop, .tablet-portrait, .phone-landscape, .phone-portrait { display: none; }

  .logo-github {
    width: 15vw;
    height: auto;
  }

  .logo-apple {
    width: 10vw;
    height: auto;
  }
}

/* tablet : portrait */
@media only screen
  and (min-width: 768px)
  and (max-width: 1024px)
  and (orientation: portrait)
  and (hover: none)
  and (pointer: coarse) {

  .tablet-portrait { display: block; }
  .desktop, .tablet-landscape, .phone-landscape, .phone-portrait { display: none; }

  .logo-github {
    width: 20vw;
    height: auto;
  }

  .logo-apple {
    width: 15vw;
    height: auto;
  }
}

/* phone : landscape */
@media only screen
  and (max-width: 926px)
  and (orientation: landscape)
  and (hover: none)
  and (pointer: coarse) {

  .phone-landscape { display: block; }
  .desktop, .tablet-portrait, .tablet-landscape, .phone-portrait { display: none; }

  .logo-github {
    width: 30vw;
    height: auto;
  }

  .logo-apple {
    width: 30vw;
    height: auto;
  }
}

/* phone : portrait */
@media only screen
  and (max-width: 899px)
  and (orientation: portrait)
  and (hover: none)
  and (pointer: coarse) {

  .phone-portrait { display: block; }
  .desktop, .tablet-portrait, .tablet-landscape, .phone-landscape { display: none; }

  .logo-github {
    width: 50vw;
    height: auto;
  }

  .logo-apple {
    width: 40vw;
    height: auto;
  }
}