/**
 * =============================================================================
 *
 * News list
 *
 * =============================================================================
 */
@layer projects {
  @scope (.scope.list) to (.scope) {
    :scope {
      display: grid;
      justify-items: center;
      padding-block: calc(100 * var(--px-to-rem));
    }

    ._inner {
      inline-size: var(--content-width);
    }

    ._main {
      display: grid;
      gap: calc(40 * var(--px-to-rem));
    }

    ._pagination:has(.pagination) {
      padding-top: calc(40 * var(--px-to-rem));
    }

    @media (width <= 767px) {
      :scope {
        padding-block: calc(50 * var(--px-to-rem));
      }
    }
  }
}

/**
 * =============================================================================
 *
 * News detail
 *
 * =============================================================================
 */
@layer projects {
  @scope (.scope.detail) to (.scope) {
    :scope {
      display: grid;
      justify-items: center;
      padding-block: calc(100 * var(--px-to-rem));
    }

    ._inner {
      inline-size: var(--content-width);
      padding-inline: calc(120 * var(--px-to-rem));
    }

    ._date {
      --_icon-size: calc(16 * var(--px-to-rem));
      align-items: center;
      color: var(--color-accent);
      display: grid;
      font-family: var(--font-futura);
      gap: calc(6 * var(--px-to-rem));
      grid-template-columns: var(--_icon-size) auto;
      justify-content: center;
      letter-spacing: 0.2em;
      line-height: calc(20 * var(--px-to-rem));
    }

    ._date::before {
      aspect-ratio: 1 / 1;
      background: currentColor;
      content: '';
      mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.99805 1.5C14.3887 1.5 17.9482 5.05953 17.9482 9.4502C17.9482 13.8408 14.3887 17.4004 9.99805 17.4004C5.60738 17.4004 2.04785 13.8408 2.04785 9.4502C2.04785 5.05953 5.60738 1.5 9.99805 1.5ZM9.99805 2.40039C6.10444 2.40039 2.94824 5.55658 2.94824 9.4502C2.94824 13.3438 6.10444 16.5 9.99805 16.5C13.8917 16.5 17.0479 13.3438 17.0479 9.4502C17.0479 5.55658 13.8917 2.40039 9.99805 2.40039ZM10 5.40039C10.2485 5.40039 10.4502 5.60206 10.4502 5.85059V10.0723L13.2012 11.4482C13.4233 11.5594 13.5135 11.8295 13.4023 12.0518C13.2911 12.2738 13.021 12.3639 12.7988 12.2529L9.79883 10.7529C9.64649 10.6768 9.54995 10.5209 9.5498 10.3506V5.85059C9.5498 5.60206 9.75147 5.40039 10 5.40039Z" /></svg>');
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: cover;
    }

    ._eyecatch {
      padding-top: calc(30 * var(--px-to-rem));
    }

    ._back {
      display: flex;
      justify-content: center;
      padding-top: calc(40 * var(--px-to-rem));
    }

    @media (width <= 767px) {
      :scope {
        padding-block: calc(50 * var(--px-to-rem));
      }

      ._inner {
        padding-inline: 0;
      }
    }
  }
}