/* ======================================
   PROJECT HERO INTRO
====================================== */

.project-hero {
  background: var(--color-gray);
  padding-bottom: var(--space-xl);
}


/* ======================================
   BACK BUTTON AREA
====================================== */

.project-header--back {
  gap: 14px;
}

.project-header--back--button {
  background-color: var(--color-dark);
  border: 2px solid var(--color-dark);
  border-radius: 50px;
  width: 44px;
  height: 44px;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.project-header--back span {
  margin-bottom: 0;
  transition: all 1.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.project-header--back:hover .project-header--back--button {
  transform: rotate(20deg);
}

.project-header--back:hover span {
  transform: translateX(-1px);
}


/* ======================================
   HERO TEXT + METADATA
====================================== */

.project-hero--info h1 {
  margin-bottom: var(--space-ms);
}

.project-info--meta h3 {
  margin-bottom: var(--space-sm);
}

.project-info--meta p {
  margin-bottom: 0;
}

ul.project-info--meta,
.project-info--meta ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ======================================
   PROJECT BODY CONTENT
====================================== */

.project-about--images img {
  border-radius: 8px;
  object-fit: cover;
  width: 100%;
  height: auto;
}

.project-about--images img.project-about--images-border {
  border: 2px solid var(--color-dark);
}

.project-about--text p:last-child,
.project-about--text ul.project-about--list:last-child {
  margin-bottom: 0;
}

.project-about--list {
  padding-left: 22px;
  margin-bottom: var(--space-ms);
}

.project-about--text > ul {
  max-width: 65ch;
  width: 100%;
}


/* ======================================
   RESPONSIVE STYLES
====================================== */

@media (min-width: 1023.98px) {
  .project-hero--info-desc p {
    margin-bottom: 0;
  }
}

@media (max-width: 1024px) {
  ul.project-info--meta {
    margin-top: var(--space-ms);
  }

  .project-hero--container img {
    margin-top: var(--space-lg);
  }
}