/* Project Story Page Styles */
.top-section {
  padding-top: 17rem;
  padding-bottom: 4.2rem;
  background-color: #222222;

  .project-story-header-wrapper {
    margin-top: 4.2rem;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        270.06deg,
        rgba(0, 0, 0, 0) 30.73%,
        rgba(0, 0, 0, 0.9) 99.94%
      );
      pointer-events: none;
    }
  }

  .project-story-header-image {
    filter: grayscale(100%);
    height: 46.8rem;
    width: 100%;
    object-fit: cover;
    object-position: 50% 30%;
  }

  .project-story-header-text-wrapper {
    position: absolute;
    padding: 4rem;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    flex-flow: column;
    justify-content: end;
    color: #fff;
    z-index: 10;
  }

  .project-story-header-subtitle {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 2.8rem;
    letter-spacing: 0;
    line-height: 100%;
    margin-bottom: 1.6rem;
  }

  .project-story-header-title {
    font-family: "Zen Old Mincho", serif;
    font-size: 4.2rem;
    line-height: 140%;
    letter-spacing: 0;
  }

  .breadcrumb-wrapper {
    position: unset;
    justify-content: right;
  }
}

@media (max-width: 780px) {
  .top-section {
    padding-top: 9.4rem;
    padding-bottom: 2rem;

    .project-story-header-wrapper {
      margin-top: 3.2rem;
    }

    .project-story-header-image {
      height: 26.2rem;
    }

    .project-story-header-text-wrapper {
      padding: 2rem;
    }

    .project-story-header-subtitle {
      font-size: 1.3rem;
      margin-bottom: 1rem;
    }

    .project-story-header-title {
      font-size: 1.6rem;
    }

    .breadcrumb-wrapper {
      position: unset;
      justify-content: left;
    }
  }
}

.project-story-members-section {
  background-color: #222222;
  color: #fff;

  .project-story-members-section-content {
    background-color: #000;
    padding: 4rem;
  }

  .project-story-members-section-title {
    border-bottom: 1px solid #888888;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 100%;
    font-size: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 4.8rem;
  }

  .project-story-members-section-members-wrapper {
    display: grid;
    gap: 4rem;
  }

  .project-story-members-section-member-card {
    max-width: 75rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  .project-story-members-section-member-card-image {
    height: 19rem;
    width: 100%;
    object-fit: cover;
    object-position: 50% 30%;
  }

  .project-story-members-section-member-card-info {
    display: flex;
    flex-flow: column;
    gap: 2rem;
  }

  .project-story-members-section-member-card-info-title {
    font-size: 1.4rem;
    line-height: 100%;
  }

  .project-story-members-section-member-card-info-name {
    font-size: 2rem;
    font-weight: 500;
    line-height: 100%;
  }

  .project-story-members-section-member-card-info-description {
    font-size: 1.4rem;
    font-weight: 500;
  }
}

@media (max-width: 780px) {
  .project-story-members-section {
    .project-story-members-section-content {
      padding: 3.2rem 1.2rem;
    }

    .project-story-members-section-title {
      font-size: 1.6rem;
      padding-bottom: 1.2rem;
      margin-bottom: 2.4rem;
    }

    .project-story-members-section-members-wrapper {
      gap: 3.2rem;
    }

    .project-story-members-section-member-card {
      grid-template-columns: 1fr;
      gap: 3.2rem;
    }

    .project-story-members-section-member-card-info-title {
      font-size: 1.2rem;
    }

    .project-story-members-section-member-card-info-name {
      font-size: 1.6rem;
    }

    .project-story-members-section-member-card-info-description {
      font-size: 1.3rem;
    }
  }
}

.project-story-cntent {
  background-color: #222222;
  padding-top: 8rem;
  padding-bottom: 13rem;
  color: #fff;

  .project-story-content-container {
    display: grid;
    grid-template-columns: 20rem 1fr;
    gap: 9.6rem;
  }

  .project-story-content-item-wrapper {
    display: grid;
    gap: 7.2rem;
  }

  .project-story-content-item {
    display: grid;
    gap: 4rem;
  }

  .project-story-content-item-number {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 2.8rem;
    letter-spacing: 0;
    line-height: 100%;
    border-bottom: 1px solid #888888;
    padding-bottom: 1.5rem;
  }

  .project-story-content-item-title {
    font-size: 2.4rem;
  }

  .project-story-content-item-image {
    height: 40rem;
    object-fit: cover;
    object-position: 50% 35%;
    width: 100%;
  }
}

@media (max-width: 780px) {
  .project-story-cntent {
    padding-top: 4rem;
    padding-bottom: 6.3rem;

    .project-story-content-container {
      grid-template-columns: 1fr;
    }

    .project-story-content-item-wrapper {
      gap: 3.2rem;
    }

    .project-story-content-item {
      gap: 2rem;
    }

    .project-story-content-item-image {
      height: 20rem;
    }

    .project-story-content-item-number {
      font-size: 2rem;
      padding-bottom: 1.2rem;
    }

    .project-story-content-item-title {
      font-size: 1.6rem;
    }
  }
}

.message-section {
  background-color: #222222;
  padding-bottom: 12rem;

  .container {
    padding-top: 52rem;
  }

  .message-section-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 47.6rem;
    object-fit: cover;
    object-position: 50% 30%;
  }

  .message-section-text-wrapper {
    background-color: #000;
    position: relative;
    z-index: 10;
    margin: 0 5.8rem;
    padding: 4rem;
    color: #fff;
  }

  .message-section-text-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 0;
    line-height: 4.4rem;
    margin-bottom: 0.8rem;
  }

  .message-section-text-heading {
    font-size: 2.4rem;
    margin-bottom: 3.2rem;
  }
}

@media (max-width: 780px) {
  .message-section {
    padding-bottom: 6rem;

    .container {
      padding-top: 33rem;
    }

    .message-section-image {
      height: 30rem;
    }

    .message-section-text-wrapper {
      margin: 0 1rem;
      padding: 3.2rem 2rem;
    }

    .message-section-text-title {
      line-height: 100%;
      margin-bottom: 2rem;
    }

    .message-section-text-heading {
      font-size: 1.6rem;
      margin-bottom: 2rem;
    }
  }
}

.other-story-section {
  padding-top: 10rem;
  padding-bottom: 2rem;

  .other-story-item-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
    margin-top: 4.8rem;
    margin-bottom: 4.8rem;
  }

  .other-story-item-image-wrapper {
    height: 19rem;
    width: 100%;
    overflow: hidden;
  }

  .other-story-item {
    &:hover {
      .other-story-item-image {
        transform: scale(1.05);
      }
    }
  }

  .other-story-item-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: transform 0.5s ease;
    object-position: 50% 30%;
  }

  .other-story-item-title {
    font-family: "Zen Old Mincho", serif;
    letter-spacing: 0;
    line-height: 140%;
    font-weight: 700;
    margin-top: 2rem;
  }

  .main-button {
    margin: 0 auto;
    margin-bottom: 9.5rem;
  }
}

@media (max-width: 780px) {
  .other-story-section {
    padding-top: 4rem;

    .other-story-item-wrapper {
      grid-template-columns: 1fr;
      gap: 3.2rem;
      margin-top: 3.2rem;
      margin-bottom: 4rem;
    }

    .other-story-item-title {
      font-size: 1.6rem;
    }

    .main-button {
      margin-bottom: 6rem;
    }
  }
}