/* Single Project — banner, content, related projects */

#wrapper .single-project {
   display: flex;
   flex-direction: column;
}

/* Banner */

#wrapper .single-project__banner {
   position: relative;
   display: flex;
   align-items: center;
   min-height: 220px;
   padding: 24px 20px;
   background-color: #1a1a1a;
   background-size: cover;
   background-position: center;
}

#wrapper .single-project__banner-overlay {
   position: absolute;
   inset: 0;
   background: rgba(193, 39, 45, 0.30);
   max-width: 50%;
}

#wrapper .single-project__title {
   position: relative;
   z-index: 1;
   margin: 0;
   max-width: 620px;
   font-size: 26px;
   line-height: 1.35;
   font-weight: 800;
   text-transform: uppercase;
   color: #fff;
}

/* Content */

#wrapper .single-project__content {
   max-width: 1280px;
   margin: 32px auto;
   padding: 0 20px;
   font-size: 15px;
   line-height: 1.8;
   color: #4b5563;
}

#wrapper .single-project__content p {
   margin: 0 0 20px;
}

#wrapper .single-project__content img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 4px;
   margin: 24px 0;
}

/* Related projects */

#wrapper .single-project__related {
   margin: 0 auto 48px;
   padding: 0 20px;
}

#wrapper .single-project__related-heading {
   margin: 0 0 20px;
   font-size: 22px;
   font-weight: 800;
   text-transform: uppercase;
   color: #16213e;
}

#wrapper .single-project__related-heading span {
   color: #e2231a;
}

#wrapper .single-project__related-grid {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 1280px;
   max-width: 100%;
}

#wrapper .single-project__related-grid .project-gallery__card--small {
   min-height: 240px;
}

/* Tablet and up */
@media (min-width: 768px) {
   #wrapper .single-project__banner {
      min-height: 500px;
      padding: 40px;
   }

   #wrapper .single-project__title {
      font-size: 50px;
   }

   #wrapper .single-project__related-grid {
      flex-direction: row;
   }

   #wrapper .single-project__related-grid .project-gallery__card--small {
      flex: 1 1 0;
      min-width: 0;
   }
}