.project-page {
  .project-page-header {
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 0 0 40px;
  }
  
  .title-section {
    display: flex;
  
    .page-title {
      font-family: var(--title-font-family);
      font-size: var(--step-7);
      line-height: 1;
      padding: 0 0 150px 0;
    }
  }

  .project-info {
    display: flex;
    justify-content: space-between;
    gap: 30px;

    .project-images {
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    #project-info {
      display: flex;
      justify-content: center;
      width: 50%;

      .project-description {
        display: flex;
        justify-content: center;
        height: fit-content;

        .description-container {
          width: 60%;
          height: fit-content;
          display: flex;
          flex-direction: column;
          gap: 30px;
    
          .close-project {
            display: flex;
            gap: 15px;
    
            & svg {
              fill: var(--color-light);
              width: 17px;
              height: 17px;
            }
          }

          .price {
            padding-top: 40px;
          }
        }
      }
    }
  }
}

@media screen and (width <= 1200px) {
  .project-page {
    .project-info {
      #project-info {
        .project-description {
        .description-container {
          width: unset;
        }
      }
      }
    }
  }
}

@media screen and (width <= 768px) {
  .project-page {
    .title-section {

      .page-title {
        padding: 0;
      }
    }
    .project-info {
      flex-direction: column-reverse;

      #project-info {
       width: unset;
      }
    }
  }
}