@layer projects {
  @scope (.scope.cv) to (.scope) {
    :scope {
      background: var(--color-accent);
      display: grid;
      justify-items: center;
      padding-block: calc(80 * var(--px-to-rem));
    }

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

    ._title {
      color: var(--color-white);
      display: grid;
      font-size: var(--font-size-500);
      font-weight: var(--font-weight-medium);
      gap: calc(24 * var(--px-to-rem));
      letter-spacing: 0.15em;
      line-height: 1.6;
    }

    ._title::after {
      background: var(--color-white);
      content: '';
      height: 1px;
      margin-inline: auto;
      width: calc(120 * var(--px-to-rem));
    }

    ._description {
      color: var(--color-white);
      font-size: var(--font-size-50);
      line-height: 3;
      padding-top: calc(32 * var(--px-to-rem));
      text-align: inherit;
      word-break: keep-all;
    }

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

    ._cta-button {
      background: var(--color-white);
      border: 1px solid var(--color-white);
      color: var(--color-accent);
      display: block;
      font-size: var(--font-size-400);
      font-weight: var(--font-weight-medium);
      line-height: 1;
      margin-inline: auto;
      padding: calc(20 * var(--px-to-rem)) calc(80 * var(--px-to-rem));
      transition-duration: var(--duration-default);
      transition-property: background, color, scale;
      transition-timing-function: var(--ease-custom);
      width: max-content;
    }

    ._cta-button:active {
      scale: 0.95;
    }

    @media (hover: hover) and (pointer: fine) {
      ._cta-button:hover {
        background: transparent;
        color: var(--color-white);
      }
    }

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

      ._title {
        font-size: calc(22 * var(--px-to-rem));
      }

      ._description {
        line-height: 2;
      }

      ._cta-button {
        font-size: var(--font-size-300);
        padding: calc(16 * var(--px-to-rem)) calc(24 * var(--px-to-rem));
        width: 100%;
      }
    }
  }
}