/**
 * =============================================================================
 *
 * KV section
 *
 * =============================================================================
 */
@layer projects {
  @scope (.scope.kv) to (.scope) {
    ._inner {
      position: relative;
    }

    ._main {
      bottom: calc(80 * var(--px-to-rem));
      color: var(--color-accent);
      display: grid;
      gap: calc(30 * var(--px-to-rem));
      left: calc(64 * var(--px-to-rem));
      position: absolute;
    }

    ._catch {
      font-size: var(--font-size-400);
      font-weight: var(--font-weight-medium);
      letter-spacing: 0.15em;
      line-height: 1;
    }

    ._logo svg {
      height: calc(150 * var(--px-to-rem));
      width: auto;
    }

    ._lead {
      font-family: var(--font-futura);
      letter-spacing: 0.5em;
      line-height: 1;
      text-transform: uppercase;
    }

    ._scroll {
      align-items: center;
      bottom: calc(80 * var(--px-to-rem));
      display: flex;
      font-family: var(--font-futura);
      gap: calc(16 * var(--px-to-rem));
      letter-spacing: 0.4em;
      line-height: calc(20 * var(--px-to-rem));
      position: absolute;
      right: calc(64 * var(--px-to-rem));
      rotate: 90deg;
      text-transform: uppercase;
      transform-origin: bottom right;
      translate: -1lh 0;
    }

    ._scroll::after {
      background: currentColor;
      content: '';
      height: 0.5px;
      width: calc(90 * var(--px-to-rem));
    }

    ._background img {
      aspect-ratio: 16 / 9;
    }

    ._cta {
      display: none;
    }

    @media (width <= 767px) {
      :scope {
        background: #efebe8;
        display: grid;
        justify-items: center;
      }

      ._main {
        bottom: calc(40 * var(--px-to-rem));
        gap: calc(24 * var(--px-to-rem));
        inset-inline: calc(32 * var(--px-to-rem));
      }

      ._catch {
        font-size: var(--font-size-200);
      }

      ._catch span {
        display: block;
      }

      ._logo svg {
        height: auto;
        width: 100%;
      }

      ._scroll {
        display: none;
      }

      ._background img {
        aspect-ratio: 0.618 / 1;
      }

      ._cta {
        display: block;
        inline-size: var(--content-width);
        padding-block: calc(10 * var(--px-to-rem));
      }
    }
  }
}

/**
 * =============================================================================
 *
 * About section
 *
 * =============================================================================
 */
@layer projects {
  @scope (.scope.about) to (.scope) {
    :scope {
      display: grid;
      justify-items: center;
      padding-block: calc(120 * var(--px-to-rem));
      position: relative;
    }

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

    ._slug {
      color: var(--color-accent);
      font-family: var(--font-futura);
      font-size: var(--font-size-300);
      letter-spacing: 0.4em;
      line-height: 1;
      text-transform: uppercase;
    }

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

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

    ._description {
      font-family: var(--font-noto-sans);
      font-size: var(--font-size-50);
      font-weight: var(--font-weight-light);
      letter-spacing: 0.15em;
      line-height: 4;
      padding-top: calc(32 * var(--px-to-rem));
    }

    ._background {
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: -1;
    }

    ._background img {
      height: 100%;
      object-position: bottom;
    }

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

      :scope::before {
        background: linear-gradient(0deg, transparent, #efebe8);
        content: '';
        height: var(--_padding-y);
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }

      ._slug {
        font-size: var(--font-size-200);
      }

      ._title {
        font-size: var(--font-size-400);
      }

      ._description {
        line-height: 2;
      }

      ._background img {
        object-position: 80% 0;
      }
    }
  }
}

/**
 * =============================================================================
 *
 * Services section
 *
 * =============================================================================
 */
@layer projects {
  @scope (.scope.services) to (.scope) {
    :scope {
      display: grid;
      justify-items: center;
      padding-block: calc(80 * var(--px-to-rem)) calc(90 * var(--px-to-rem));
      position: relative;
    }

    :scope::after {
      background: var(--color-accent);
      bottom: 0;
      content: '';
      height: calc(50 * var(--px-to-rem));
      inset-inline: 0;
      margin-inline: auto;
      position: absolute;
      width: 1px;
    }

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

    ._heading {
      text-align: center;
    }

    ._slug {
      color: var(--color-accent);
      font-family: var(--font-futura);
      font-size: var(--font-size-300);
      letter-spacing: 0.4em;
      line-height: 1;
      text-align: inherit;
      text-transform: uppercase;
    }

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

    ._main {
      align-items: flex-start;
      display: grid;
      gap: calc(24 * var(--px-to-rem));
      grid-template-columns: repeat(2, 1fr);
      padding-top: calc(40 * var(--px-to-rem));
    }

    ._item {
      counter-increment: item;
      display: grid;
      gap: calc(32 * var(--px-to-rem));
    }

    ._item-image img {
      aspect-ratio: 16 / 9;
    }

    ._item-contents {
      display: grid;
      gap: calc(16 * var(--px-to-rem));
      grid-template-columns: auto 1fr;
    }

    ._item-contents::before {
      color: var(--color-accent);
      content: counter(item, decimal-leading-zero) '.';
      font-family: var(--font-futura);
      font-size: var(--font-size-400);
      letter-spacing: 0.15em;
      line-height: 1;
    }

    ._item-title {
      font-size: var(--font-size-400);
      font-weight: var(--font-weight-medium);
      letter-spacing: 0;
      line-height: 1;
    }

    ._item-description {
      font-size: var(--font-size-50);
      line-height: 2;
      padding-top: calc(12 * var(--px-to-rem));
    }

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

      ._slug {
        font-size: var(--font-size-200);
      }

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

      ._main {
        gap: calc(40 * var(--px-to-rem));
        grid-template-columns: 1fr;
      }

      ._item {
        gap: calc(24 * var(--px-to-rem));
      }

      ._item-contents::before {
        font-size: var(--font-size-300);
      }

      ._item-title {
        font-size: var(--font-size-300);
      }
    }
  }
}

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

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

    ._heading {
      text-align: center;
    }

    ._slug {
      color: var(--color-accent);
      font-family: var(--font-futura);
      font-size: var(--font-size-300);
      letter-spacing: 0.4em;
      line-height: 1;
      text-align: inherit;
      text-transform: uppercase;
    }

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

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

    ._main-inner {
      display: grid;
      gap: calc(40 * var(--px-to-rem));
      padding-bottom: calc(40 * var(--px-to-rem));
      padding-top: calc(24 * var(--px-to-rem));
    }

    ._more {
      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));
      }

      ._slug {
        font-size: var(--font-size-200);
      }

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

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

      ._main-inner {
        gap: calc(48 * var(--px-to-rem));
        padding-bottom: 0;
      }
    }
  }
}