/* Page Setup
body {
  background-color: white;
  color: rgb(1, 8, 37);
  font-family: Arial, Helvetica, sans-serif;
} */

.project-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 120px 1.5rem 4rem 1.5rem;
}

/* Typography Blocks */
.project-title {
  font-size: 52px;
  font-weight: 700;
  text-align: center;
  color: #0e0f3d;
  margin-bottom: 2rem;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: #0e0f3d;
  margin: 3.5rem 0 1.5rem 0;
  background-color: white;
}

.paragraph-text {
  font-size: 20px;
  line-height: 1.6;
  color: #0e0f3d;
  margin-bottom: 1.5rem;
  background-color: white;
}

.caption {
  font-size: 20px;
  color: #0e0f3d;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  background-color: white;
}

.caption.italic {
  font-style: italic;
}

/* Media Elements */
.single-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Video Box (16:9 Aspect Ratio) */
.video-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  background: #000;
}

.video-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Grids */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.grid-2 img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .project-title {
    font-size: 36px;
  }
  .section-title {
    font-size: 28px;
  }
}

body {
  background-image: url("/media/imgs/background.png");
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}