/* brand */

#brand {
   height: 590px;
   background: linear-gradient(rgba(29, 25, 44, 0.8), rgba(29, 25, 44, 0.8)), url("/images/slider-bg.jpg");
   background-position: 50%;
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

#brand h1 {
   padding: 0 5px;

   text-transform: uppercase;
   font-weight: 100;
   font-size: 45px;
   color: #e3e3e4;
   letter-spacing: 0.2em;
   text-align: center;
}

#brand p {
   padding: 0 15px;

   text-align: center;
   color: #b9b9b9;
   font-size: 18px;
   font-weight: 300;
   line-height: 1.5;
}

@media (max-width: 40rem) {
   #brand h1 {
      font-size: 28px;
   }

   #brand p {
      font-size: 15px;
   }
}

@media (max-width: 319px) {
   #brand {
      height: 400px;
   }

   #brand h1 {
      font-size: 22px;
      padding: 12.5px;
   }

   #brand p {
      font-size: 14px;
   }
}

/* about & services & shop */

#services {
   background-color: #f2f2f2;
}

#about > div,
#services > div,
#shop > div {
   display: flex;
   align-items: center;
   justify-content: center;

   max-width: 1300px;
   min-height: 410px;
   padding: 100px 75px;
   margin: auto;
}

#about > div > *,
#services > div > *,
#shop > div > * {
   display: inline-block;
}

#about > div > div,
#services > div > div,
#shop > div > div {
   padding: 10px;
}

#about h2,
#services h2,
#shop h2 {
   font-weight: 600;
   font-size: 28px;
   color: #333;
}

#about em,
#services em,
#shop em {
   font-size: 17px;
   color: #666;
   font-family: volkhov, serif;
}

#about p,
#services p,
#shop p {
   font-size: 15px;
   color: #7b7b7b;
   line-height: 28px;
}

#about li > p,
#services li > p,
#shop li > p {
   margin: 5px 0;
}

#about img,
#services img,
#shop img {
   height: 100%;
   max-height: 400px;
   width: auto;
   padding: 20px;
}

#services a,
#shop a {
   display: inline-block;
   background-color: #655e7a;
   padding: 15px 20px;
   border-radius: 4px;

   color: #fff;
   text-decoration: none;
   font-size: 14px;
}

@media (max-width: 60rem) {
   #about > div,
   #services > div,
   #shop > div {
      flex-wrap: wrap;
   }
}

@media (max-width: 40rem) {
   #about > div,
   #services > div,
   #shop > div {
      padding: 25px 7.5px;
   }

   #about img,
   #services img,
   #shop img {
      width: 100%;
      height: auto;
   }
}