/* Smartphones (portrait) ---------- */
@media screen and (min-width: 120px){
  article{
    margin: 10% 8% 10% 8%;
  }

  .logo{
    width: 50%;
    height: auto;
  }
}


/* Smartphones (landscape) ---------- */
@media screen and (min-width: 480px){
  article{
    margin: 10% 8% 10% 8%;
  }

  .logo{
    width: 35%;
    height: auto;
  }
}

/* Tablets, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
  article{
    margin: 10% 12% 10% 12%;
  }

  .logo{
    width: 18%;
    height: auto;
  }
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
  article{
    margin: 10% 21% 10% 21%;
  }

  .logo{
    width: 15%;
    height: auto;
  }
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1224px){
  article{
    margin: 10% 26% 10% 26%;
  }

  .logo{
    width: 15%;
    height: auto;
  }
}
/* Desktops and laptops ---------- */
@media screen and (min-width: 1600px){
  article{
    margin: 10% 30% 10% 30%;
  }

  .logo{
    width: 12%;
    height: auto;
  }
}
/* Large screens ---------- */
@media screen and (min-width: 1824px){
  article{
    margin: 10% 34% 10% 34%;
  }

   .logo{
    width: 10%;
    height: auto;
  }
}