.hero {
  background-color: #344c34;
}

.projects-list {
  .project {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    /* min-height: 36rem; */
    background-color: var(--color-black);

    .project-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
      opacity: 0.75;
    }

    .project-info {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      color: var(--color-white);

      .project-title {
        color: var(--color-white);
      }

      .project-status {
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 1rem;
      }
    }

    @media (width >= 576px) {
      min-height: 36rem;
    }
  }
}