/*
* Responsive web design - Desktop and Mobile
*/

/* Mobile Screen */
.mobile-only {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.desktop-only {
  display: none !important;
}

.mobile-header .mobile-center {
  display: flex;
  flex-direction: column;
  align-items: center;       
  justify-content: center;   
  text-align: center;      
}

.mobile-header .mobile-center h1,
.mobile-header .mobile-center h2,
.mobile-header .mobile-center h3 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/*
* Desktop Screen (≥ 769px)
*/
@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }

  .desktop-only {
    display: block !important;
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
  }

  .mobile-header .mobile-center {
    align-items: flex-start; 
    text-align: left;
  }

  .mobile-header .mobile-center h1,
  .mobile-header .mobile-center h2,
  .mobile-header .mobile-center h3 {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
}