@media (max-width: 768px) {
   section {
      flex-direction: column;
      align-items: center;
      padding: 1em;
   }
   section:before {
      width: 80%;
   }
   /*** Header ***/
   header {
      width: 100%;
      background: var(--header-bg-color);
      position:inherit;
      transform: none;
      height: 100px;
   }
   .header_content-logo {
      width: 8rem;
      left: 50%;
      transform: translateX(-50%);
      top: 0px;
      margin: 0;
   }
   .header_content-nav {
      justify-content: center;
      padding: 10px;
      margin-left: 0;
   }
   .header_content-nav-list {
      display: none;
   }
   /*** Intro ***/
   .intro {
      min-height: 100dvh;
   }
   .intro_text {
      width: 90%;
      margin-top: 1.5em;
   }
   .intro_text-title {
      font-size: 1.5em;
      font-weight: 400;
   }
   .intro_text-subtitle {
      font-size: 1.3em;
      font-weight: 400;
      margin-bottom: 1em;
   }
   .intro_text-highlight {
      font-size: 1.8rem;
   }
   .intro_img {
      width: 80%;
      margin-top: 1.5em;
   }
   /*** Services ***/
   .service_container {
      flex-direction: column;
      align-items: center;
      max-width: 100%;
   }
   .service_container-item {
      width: 90%;
      font-size: 1em;
   }
   .service_container-item img {
      width: 50px;
   }
   .service_container-item h3 {
      margin-top: 0.2em;
   }
   .service_cta {
      margin-top: 2em;
      margin-bottom: 3em;
   }
   /* Galerie */
   .galerie-container {
      grid-template-columns: repeat(2, 1fr);     
      grid-template-rows: repeat(0.5fr, 1fr);
      gap: 1.2em;
   }
   .galerie_item-title {
      font-size: 0.8rem;
   }
   /*** Contact ***/
   .contact {
      min-height: auto;
      padding: 5em 0;
   }
   .contact-text {
      width: 90%;
   }
   .contact-text-title {
      font-size: 1.5em;
   }
   .contact-text-description {
      font-size: 1em;
   }
   .contact-text-info {
      font-size: 1em;
      margin-bottom: 1em;
      flex-direction: column;
   }
   /*** Footer ***/
   footer {
      height: auto;
   }
   .logo {
      width: 6em;
      margin: 5px 0 ;
   }
   /*** Menu ***/
   .menu-item-container {
      grid-template-columns: repeat(auto-fit, minmax(100%, 100%));
      gap: 2rem;
   }
   .menu-nav {
      display: none;
   }

   /*** Footer ***/
   footer {
      width: 100%;
      max-width: 100%;
      margin: 0;
      border-radius: 0;
      background-color: #171a1c;
   }
   .footer_content {
      flex-direction: column;
      align-items: center;
      gap: 1em;
      padding: 1em 0;
   }
   .footer_info {
      text-align: center;
      gap: 10px;
   }
   .footer_link {
      margin-top: 10px;
      margin: 0;
   }
}