@layer theme {

   .c--section {
      margin-bottom: 75px;
      display: flex;
   }

   .c--section .c--column {
      padding: 20px;
   }

   .c--section .c--column-33 {
      width: 33%;
   }

   .c--section .c--column-50 {
      width: 50%;
   }

   .c--section .c--column-66 {
      width: 66%;
   }

   .c--vertical-align-center {
      display: flex;
      flex-direction: column;
      justify-content: center;
   }

   .c--bg-gray {
      background-color: #f5f5f5;
   }

   .c--about-page h2 {
      font-family: var(--font-medium);
      font-size: 36px;
      position: relative;
      color: #212121;
      display: flex;
      align-items: center;
      gap: 20px;
   }

   .c--about-page h2.divider-right::after {
      content: "";
      height: 2px;
      width: 90px;
      background-color: var(--text-color, #212121);
      display: block;
      position: absolute;
      right: 10px;
      top: 22px;
   }

   .c--about-page h2.divider-left {
      text-align: right;
   }

   .c--about-page h2.divider-left::after {
      content: "";
      height: 2px;
      width: 110px;
      background-color: var(--text-color, #212121);
      display: block;
      position: absolute;
      left: 0px;
      top: 22px;
   }

   .divider-right,
   .divider-left {
      width: 100px;
      height: 2px;
      background-color: #212121;
      display: block;
   }

   @media only screen and (max-width: 1024px) {
      .c--section {
         flex-direction: column;
         margin-bottom: 50px;
      }

      .c--section .c--column-33,
      .c--section .c--column-50,
      .c--section .c--column-66 {
         width: 100%;
      }

      .styled-logo {
         max-width: 300px;
      }
   }

}