/* @font-face {
  font-family: 'dinish-bold';
  src: url("http://www.dgmn.co/assets/fonts/dinish/DINish-Bold.woff2") format('woff2');
}
@font-face {
  font-family: 'dinish-bolditalic';
  src: url("http://www.dgmn.co/assets/fonts/dinish/DINish-BoldItalic.woff2") format('woff2');
}
@font-face {
  font-family: 'dinish-italic';
  src: url("http://www.dgmn.co/assets/fonts/dinish/DINish-Italic.woff2") format('woff2');
}
@font-face {
  font-family: 'dinish-regular';
  src: url("http://www.dgmn.co/assets/fonts/dinish/DINish-Regular.woff2") format('woff2');
} */

.project {
  /* Add your project styles here */
}
.project-title h1 {
  font-family: 'dinish-bold', sans-serif;
  font-size: 3rem;
  padding-top: 3rem;
  margin-bottom: .5rem;
}
.project-subheading {
  font-family: 'dinish-regular', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: #505f79;
}
.project-intro {
  font-family: 'dinish-regular', sans-serif;
  font-weight: normal;
  font-size: .85rem;
  line-height: 1.5em;
  margin-top: 6rem;
  margin-bottom: 6rem;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns of equal width */
  gap: 80px; /* Space between columns */
}
.project-header h3 {
  font-family: 'dinish-regular', sans-serif;
  font-weight: 200;
  font-size: 1.2rem;
  padding-bottom: 1rem;
}
.project-HMW {
}
.project-contributions {
  /* Add styles here */
}
.cover {
  /* Add styles here */
}
.breakout-image {
  width: 100vw; /* Full viewport width */
  max-width: 1840px; /* Do not exceed the natural size */
  height: auto; /* Maintain aspect ratio */
  position: relative;
  left: 50%;
  transform: translateX(-50%); /* Center the image */
}
.client-area {
  font-family: 'dinish-regular', sans-serif;
  font-weight: normal;
  font-size: .85rem;
  line-height: 1.5em;
  margin-top: 6rem;
  margin-bottom: 6rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 40px 20px 20px;
}
.item {
  /* Add styles here */
}
.project-client  {
  grid-column: 1 / span 3;
  grid-row: 1;
  padding-top: 2px;
}
.project-client-role  {
  grid-column: 1 / span 3;
  grid-row: 2;
}
.project-dates  {
  grid-column: 1 / span 3;
  grid-row: 3;
}
.project-summary  {
  grid-column: 2;
  grid-row: 1 / span 3;
}

/* Responsive styles for smaller screens */
@media (max-width: 860px) {
  .project-title h1 {
    font-size: 2.5rem; /* Adjust font size */
  }
  .project-subheading {
    font-size: 0.9rem; /* Adjust font size */
  }
  .project-intro {
    grid-template-columns: 1fr; /* Stack columns vertically */
    gap: 40px; /* Reduce gap for smaller screens */
  }
  .client-area {
    grid-template-columns: 1fr; /* Stack all items vertically */
    grid-template-rows: auto; /* Let rows adjust automatically */
    gap: 1rem; /* Add space between items */
  }
  .project-client,
  .project-client-role,
  .project-dates,
  .project-summary {
    grid-column: 1; /* Make each item full width */
    grid-row: auto; /* Allow rows to adjust naturally */
  }
  .breakout-image {
    width: 100%; /* Ensure image fits within screen width */
  }
}

@media (max-width: 520px) {
  .project-title h1 {
    font-size: 2rem; /* Further adjust font size */
  }
  .project-subheading {
    font-size: 0.8rem; /* Further adjust font size */
  }
  .project-intro, .client-area {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .client-area {
    grid-template-columns: 1fr; /* Stack all items vertically */
    grid-template-rows: auto; /* Let rows adjust automatically */
    gap: 1rem; /* Add space between items */
  }

  .project-client,
  .project-client-role,
  .project-dates,
  .project-summary {
    width: 100%; /* Ensure full width */
    /*padding: 0.5rem 0; /* Add padding for separation */
    margin: 0; /* Reset margin */
  }
}