.p-heading-lv1 {
  display: grid;
  place-content: center;
  padding-block: calc(var(--space-section) / 2);
}

.p-challengeNav {
  ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    li {
      > * {
        display: block;
        padding-block: 0.8em;
        text-align: center;
      }

      > a {
        color: var(--accent-foreground);
        text-decoration: none;
        background-color: var(--accent-subtle);

        @media (hover: hover) {
          &:hover {
            color: var(--foreground);
            background-color: var(--accent-foreground);
          }
        }
      }

      > span[aria-current] {
        color: var(--foreground);
        user-select: none;
        background-color: var(--accent-foreground);
      }
    }

    @media (width < 768px) {
      --offset: 2em;

      grid-template-columns: 1fr;
      row-gap: 1px;
      padding-inline: var(--offset);

      li:first-of-type {
        transform: translateX(calc(var(--offset) * -1));
      }

      li:last-of-type {
        transform: translateX(calc(var(--offset) * 1));
      }
    }
  }
}

.p-hero {
  --offset-size: 15%;

  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-block: calc(var(--space-section) / 3);

  .p-hero-img {
    position: relative;
    z-index: 1;
    padding-block: calc(var(--offset-size) / 2);
    margin-inline-end: calc(var(--offset-size) * -1);

    > img {
      height: 100%;
      object-fit: cover;
    }
  }

  .p-hero-content {
    display: grid;
    row-gap: 0.5em;
    place-content: center;
    padding-block: calc(var(--offset-size) / 2);
    margin-inline-start: calc(var(--offset-size) * -1);
    background-color: var(--background-subtle);

    > * {
      padding-inline-start: calc(var(--offset-size) * 2 + 2rem);
      padding-inline-end: 20%;
    }

    > h2 {
      /* 30~44px 375/1280px */
      font-size: clamp(1.875rem, 1.512rem + 1.55vw, 2.75rem);
      letter-spacing: 0.12em;
    }

    > p {
      text-align: justify;

      &::before {
        display: block;
        margin-block-end: 0.5em;
        font-size: 1.2em;
        font-weight: 500;
        text-transform: capitalize;
        content: "profile";
      }
    }

    &::after {
      position: absolute;
      right: 50%;
      bottom: 0;
      z-index: 1;
      width: 25%;
      aspect-ratio: 443 / 204;
      content: "";
      background: url("../../images/pages/challenge-text-profiles.svg")
        no-repeat center center/cover;
      transform: translateX(50%);
    }
  }

  @media (width < 890px) {
    --offset-size: 10vw;

    grid-template-columns: 1fr;

    .p-hero-img {
      padding-block: 0;
      padding-inline: calc(var(--offset-size) / 2);
      margin-block-end: calc(var(--offset-size) * -1);
      margin-inline-end: 0;

      &::after {
        position: absolute;
        right: calc(var(--offset-size) / 2);
        bottom: 0;
        z-index: 1;
        width: 35%;
        aspect-ratio: 443 / 204;
        content: "";
        background: url("../../images/pages/challenge-text-profiles.svg")
          no-repeat center center/cover;
        transform: translateY(80%);
      }
    }

    .p-hero-content {
      padding-block: 0;
      padding-inline: calc(var(--offset-size) / 2);
      margin-block-start: calc(var(--offset-size) * -1);
      margin-inline-start: 0;

      > * {
        padding-inline-start: 0;
      }

      > h2 {
        padding-block-start: calc(var(--offset-size) * 2 + 1lh);
      }

      > p {
        padding-block-end: var(--offset-size);
      }

      &::after {
        display: none;
      }
    }
  }
}

.p-contents {
  display: grid;
  row-gap: calc(var(--space-section) / 2);
  padding-block-start: calc(var(--space-section) / 2);
  padding-block-end: var(--space-section);

  .p-contents-title {
    /* 24~44px 375/1280px */
    font-size: clamp(1.5rem, 0.982rem + 2.21vw, 2.75rem);
    text-align: center;
    letter-spacing: 0.12em;
  }

  .p-contents-group {
    display: grid;
    row-gap: 1.5em;

    > h3 {
      --padding: 0.2rem min(1.5rem, 3vw);

      display: grid;

      > small {
        display: inline-block;
        justify-self: start;
        min-width: 10em;
        padding: var(--padding);
        font-weight: 500;
        color: var(--background-subtle);
        text-align: center;
        background-color: var(--accent-subtle);
      }

      > span {
        padding: var(--padding);
        color: var(--heading-foreground);
        background-color: var(--heading-background);
      }
    }
  }
}

.p-contents-image {
  max-width: min(600px, 75vw);
  margin: 0 auto;
}