/* 
// Styles the new-project-component component
// styles for the list that will contain the project rows
*/
.list[data-component~=new-project-component] {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.new-project-component {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
@media (max-width: 768px) {
  .new-project-component {
    flex-direction: column;
  }
}
.new-project-component .new-project-component-image {
  flex: 0 0 300px;
}
.new-project-component .new-project-component-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}
.new-project-component .new-project-component-content {
  flex: 1;
}
.new-project-component .new-project-component-content .title {
  margin-top: 0;
  font-size: 1.5rem;
}
.new-project-component .new-project-component-content .subtitle {
  font-style: italic;
  color: var(--gray);
}
.new-project-component .new-project-component-content .tags {
  margin-top: 1rem;
}
.new-project-component .new-project-component-content .tags .tag {
  background: var(--secondary);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  display: inline-block;
  margin-right: 0.5rem;
}

/*# sourceMappingURL=new-project-component.css.map */