/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 767px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
  .menu {
    width: 100%;
  }
  p {
    font-size: 18px;
  }
  .description h3 {
    font-size: 22px;
  }
  .title-text {
    font-size: 40px;
  }
  .social-icons {
    width: 30px;
    margin: 20px;
  }
  .language__text {
    font-size: 0.7em;
  }
  .template-grid, .template-right, .template-left, .template-right-alt, .template-left-alt {
    all: unset;
    position: relative;
    display: -ms-grid;
    display: grid;
    width: 100%;
    height: 100vh;
    -ms-grid-columns: 40px 1fr 40px;
        grid-template-columns: 40px 1fr 40px;
    -ms-grid-rows: 60px auto auto auto;
        grid-template-rows: 60px auto auto auto;
  }
  .template-right, .template-right-alt {
        grid-template-areas: ". . ." ". title ." ". content ." "media media media";
  }
  .template-left, .template-left-alt {
        grid-template-areas: ". . ." ". title ." "media media media" ". content .";
  }
}
/*# sourceMappingURL=media.css.map */