/* Proyecto */
.header_wrapper {
  display: flex;
  margin: 12.44rem 1.94rem 3.25rem 2rem;
  gap: 1rem;
}

.cliente {
  width: 20.75rem;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 3rem */
  letter-spacing: -0.05rem;
}

.titulo {
  width: 35.25rem;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 3rem */
  letter-spacing: -0.05rem;
}

.cover {
  width: 100%;
  height: 31.25rem;
}

.project_info {
  display: flex;
  gap: 8rem;
  margin: 3.63rem 1.94rem 11.5rem 2.38rem;
}

.desc {
  display: flex;
  flex-direction: column;
  width: 13rem;
  color: #b0b0b0;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 0.975rem */
  gap: 1rem;
}

.problem_wrapper {
  width: 42.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.problem_wrapper strong {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 800;
  line-height: 130%; /* 1.4625rem */
}
.problem_wrapper p {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}

.first_img {
  padding: 0 1.94rem 0 2rem;
  width: 100%;
  height: 37.5rem;
}

.gallery_grid {
  margin-top: 11.69rem;
  margin-bottom: 11.75rem;
  width: 100%;
  height: 78.56rem;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  padding: 0 1.94rem 0 2rem;
}

.grid_1,
.grid_2,
.grid_3 {
  width: 24.875rem;
  height: 31.375rem;
  flex-shrink: 0;
}

.grid_2,
.grid_3 {
  margin-top: -7.81rem;
}

.grid_2 {
  align-self: center; /* Se alinea a sí mismo en el centro */
}

.grid_3 {
  align-self: flex-end; /* Se alinea a sí mismo al final (derecha) */
}

.gallery_2 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 0 1.94rem 0 2rem;
}

.img_gallery {
  height: 43.75rem;
}

.back {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
}

.back a {
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 1.5rem */
}

@media (max-width: 660px) {
      .header_wrapper {
    flex-direction: column;
    margin: 8rem 3rem 3.56rem 1rem;
  }

  .cliente {
    font-size: 1.25rem;
    letter-spacing: -0.025rem;
  }

  .titulo {
    width: auto;
    line-height: 100%; /* 3rem */
    letter-spacing: -0.05rem;
  }

  .cover {
    height: 22.75rem;
  }

  .project_info {
    display: flex;
    flex-direction: column-reverse;
    gap: 4rem;
    margin: 2.06rem 2rem 5.06rem 2.37rem;
  }

  .desc {
    width: 13.1875rem;
  }

  .problem_wrapper {
    width: auto;
  }
  .problem_wrapper strong {
    font-size: 1rem;
  }
  .problem_wrapper p {
    font-size: 1rem;
  }

  .first_img {
    padding: 0 1rem 0 1rem;
    width: 100%;
    height: 10.625rem;
  }

  .gallery_grid {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0 1rem 0 1rem;
  }

  .grid_1,
  .grid_2,
  .grid_3 {
    width: 100%;
    height: 28.0625rem;
    flex-shrink: 0;
  }

  .grid_2,
  .grid_3 {
    margin-top: 0;
  }

  .grid_2 {
    align-self: center; /* Se alinea a sí mismo en el centro */
  }

  .grid_3 {
    align-self: flex-end; /* Se alinea a sí mismo al final (derecha) */
  }

  .gallery_2 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1rem 0 1rem;
  }

  .img_gallery {
    height: 11.3125rem;
  }

  .back {
    margin-top: 3.75rem;
  }
}