@layer global {
  h2 {
    padding-block: 1.5rem;
    font-size: var(--font-size-h2);
    font-weight: 770;
    font-family: var(--font-secondary);
    font-variant-caps: small-caps;
    font-kerning: normal;
    letter-spacing: -1%;
    color: var(--colour-text-dark-primary);
    line-height: 1;
  }

  .wrapper-secondary {
    padding-block: 0;
  }
}

@layer components {
  .project {
    padding-bottom: 1rem;

    .project__item {
      max-width: calc(500 / 16 * 1rem);
      padding-bottom: 1rem;
    }

    .project-description__thumbnail {
      @media (width >= calc(1260 / 16 * 1rem)) {
        margin-top: 0.1rem;
      }
      /* lowered the image for the Japanese version of the page to align with the top part of the description text */
    }

    .project-description {
      padding-block: 0.5rem 0.3rem;

      @media (width >= calc(1260 / 16 * 1rem)) {
        padding-left: 2rem;
        padding-block: 0;
        margin-top: -0.3rem;
      }

      p {
        padding-bottom: 0.2rem;
      }

      .project-description__item {
        padding-bottom: 0.5rem;

        @media (width >= calc(1260 / 16 * 1rem)) {
          padding-bottom: 1rem;
        }
      }

      .cancel-padding {
        padding-bottom: 0;
      }
    }

    .project__item__max-width {
      grid-column: 1 / -1;
      max-width: 100%;
      padding-top: 0.3rem;

      @media (width >= calc(1260 / 16 * 1rem)) {
        max-width: calc(
          100% - 1rem
        ); /* to make the end of the line align with top elements on desktop */
      }
    }

    .project__back {
      grid-column: 1 / -1;
      max-width: 100%;
      border-top: 2px solid var(--colour-border);
      padding-top: 0.3rem;
      margin-block: 2rem;

      @media (width >= calc(1260 / 16 * 1rem)) {
        max-width: calc(
          100% - 1rem
        ); /* to make the end of the line align with top elements on desktop */
      }

      .back__flex-wrapper {
        display: flex;
        flex-direction: column;

        @media (width >= calc(400 / 16 * 1rem)) {
          flex-direction: row;
          align-items: flex-end;
          justify-content: space-between;
          gap: 0;
        }
      }
    }

    .project__back-link {
      transition: opacity 180ms ease-in-out;
      &:hover {
        opacity: 0.7;
      }
    }
  }

  .photo-credit {
    color: var(--colour-text-dark-secondary);
    font-size: var(--font-size-photo-credit);
  }
}