.Project {
}

.Project-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.Project p {
  margin-bottom: 1em;
  max-width: 40rem;
}

.Project-subtitle {
  display: block;
  max-width: 40rem;
  transform: translateY(-0.5rem);
}

.Project h2 {
  font-size: var(--font-size-xl);
  margin-top: 1.5rem;
  margin-bottom: 0.25rem;
}

.Project h3 {
  font-size: var(--font-size-lg);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.Project h4 {
  font-size: var(--font-size-md);
  margin-top: 1.25rem;
  margin-bottom: 1rem;
}

.Project .video-wrapper {
  display: flex;
  justify-content: center;
  margin: 1rem auto;
}

.Project img.Image--small {
  display: block;
}

.Project-imageWrapper {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1rem;
}

.Project-imageWrapper a {
  max-width: 40rem;
}

.Project-imageWrapper a img {
  display: block;
  max-width: 100%;
  height: auto;
  box-shadow: 0 0 6px rgb(0 0 0 / 10%);
}

.Project ul {
  margin: 0 0 1rem 1rem; /* reduced left margin */
  padding-left: 0.5rem; /* reduced indent */
  max-width: 40rem; /* match paragraph width */
}

.Project li {
  margin-bottom: 0.5rem; /* spacing between items */
  line-height: 1.5; /* improve readability */
}

.Project li ul {
  margin-top: 0.25rem; /* smaller gap for nested lists */
  margin-bottom: 0.5rem;
}

.Project li::marker {
  color: #555; /* subtle marker color */
}

.Project-tags {
}

.Project-tag {
  display: inline-block;
  background-color: var(--tag-color);
  color: var(--primary-color);
  padding: 0.15rem 0.5rem;
  font-size: var(--font-size-sm);
  margin-right: 0.25rem;
  margin-bottom: 1rem;
  font-family: var(--font-secondary);
}

@media (max-width: 600px) {
  .Project-imageWrapper a {
    max-width: 100%;
  }

  .Project img.Image--small {
    max-width: 100%;
  }
}