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

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

    ._head {
      text-align: center;
    }

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

    ._description {
      --_line-height: 2;
      --_font-size: var(--font-size-50);
      display: grid;
      font-family: var(--font-noto-sans);
      font-size: var(--_font-size);
      font-weight: var(--font-weight-light);
      gap: calc(var(--_font-size) * var(--_line-height));
      line-height: var(--_line-height);
      padding-top: calc(24 * var(--px-to-rem));
    }

    ._description p {
      text-align: inherit;
    }

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

    ._detail {
      background: #f7f2f2;
      padding: calc(30 * var(--px-to-rem));
    }

    ._detail-heading {
      --_icon-size: calc(20 * var(--px-to-rem));
      align-items: center;
      color: var(--color-accent);
      display: grid;
      font-size: var(--font-size-200);
      font-weight: var(--font-weight-regular);
      gap: calc(4 * var(--px-to-rem));
      grid-template-columns: var(--_icon-size) auto;
      justify-content: center;
      line-height: calc(20 * var(--px-to-rem));
    }

    ._detail-heading::before {
      aspect-ratio: 1 / 1;
      background: currentColor;
      content: '';
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: cover;
    }

    ._detail-heading[data-icon='time']::before {
      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>');
    }

    ._detail-heading[data-icon='price']::before {
      mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.1348 1.51074C10.2228 1.5252 10.3079 1.55402 10.3867 1.5957L10.5 1.66797L10.5996 1.75781C10.6914 1.85472 10.7585 1.9729 10.7949 2.10254L10.7979 2.11133V2.1123L11.9834 6.71289L12.0273 6.8457C12.08 6.97529 12.1583 7.0938 12.2578 7.19336C12.3904 7.32591 12.5567 7.41994 12.7383 7.4668L17.3389 8.65332L17.3467 8.65527C17.5205 8.7033 17.6739 8.80674 17.7832 8.9502C17.8923 9.0936 17.9521 9.26935 17.9521 9.4502C17.9521 9.63104 17.8923 9.80679 17.7832 9.9502C17.6739 10.0937 17.5205 10.1971 17.3467 10.2451L17.3389 10.2471L12.7383 11.4336V11.4326C12.6019 11.4678 12.4743 11.5305 12.3633 11.6152L12.2578 11.707C12.1583 11.8066 12.08 11.9251 12.0273 12.0547L11.9834 12.1875L10.7969 16.7891L10.7949 16.7979C10.7585 16.9277 10.6905 17.0457 10.5986 17.1426L10.499 17.2324C10.3557 17.341 10.1801 17.4004 10 17.4004C9.86511 17.4004 9.73318 17.3669 9.61523 17.3047L9.50195 17.2324C9.35879 17.1237 9.25464 16.9712 9.20605 16.7979L9.20312 16.7891L8.01758 12.1875C7.97071 12.0059 7.87579 11.8396 7.74316 11.707C7.61069 11.5746 7.44524 11.4795 7.26367 11.4326V11.4336L2.66211 10.2471L2.65137 10.2441C2.47904 10.1952 2.32712 10.0907 2.21875 9.94727C2.13774 9.83999 2.08407 9.7153 2.0625 9.58398L2.05176 9.4502L2.0625 9.31641C2.08407 9.18509 2.13774 9.0604 2.21875 8.95312L2.30762 8.85254C2.40403 8.76068 2.52198 8.69303 2.65137 8.65625L2.66211 8.65332L7.26367 7.4668C7.44517 7.41996 7.61056 7.32487 7.74316 7.19238C7.87577 7.05986 7.97061 6.89435 8.01758 6.71289L9.2041 2.11133L9.20605 2.10254C9.25456 1.92936 9.35871 1.77673 9.50195 1.66797C9.6454 1.55915 9.82095 1.50001 10.001 1.5L10.1348 1.51074ZM8.88867 6.9375C8.80149 7.27468 8.62617 7.58292 8.37988 7.8291C8.13356 8.07526 7.82548 8.25091 7.48828 8.33789L3.17773 9.44922L7.48828 10.5615C7.82554 10.6486 8.13342 10.8247 8.37988 11.0713C8.6262 11.3176 8.80166 11.6256 8.88867 11.9629L10 16.2734L11.1123 11.9629C11.1994 11.6257 11.3749 11.3176 11.6211 11.0713C11.8675 10.8247 12.1756 10.6486 12.5127 10.5615H12.5137L16.8262 9.4502L12.5137 8.33887H12.5127C12.1755 8.2518 11.8674 8.07547 11.6211 7.8291C11.3749 7.58278 11.1994 7.27475 11.1123 6.9375L10.001 2.62402L8.88867 6.9375ZM4 12.75C4.24852 12.75 4.4502 12.9517 4.4502 13.2002V13.5H4.75C4.9985 13.5 5.2002 13.7017 5.2002 13.9502C5.20013 14.1986 4.99846 14.4004 4.75 14.4004H4.4502V14.7002C4.45001 14.9486 4.24841 15.1504 4 15.1504C3.75159 15.1504 3.54999 14.9486 3.5498 14.7002V14.4004H3.25C3.00152 14.4004 2.79987 14.1987 2.7998 13.9502C2.7998 13.7017 3.00148 13.5 3.25 13.5H3.5498V13.2002C3.5498 12.9517 3.75148 12.75 4 12.75ZM16 2.25C16.2485 2.25 16.4501 2.45173 16.4502 2.7002V3.75H17.5C17.7485 3.75005 17.9502 3.95171 17.9502 4.2002C17.9502 4.44868 17.7485 4.65034 17.5 4.65039H16.4502V5.7002C16.4502 5.94868 16.2485 6.15039 16 6.15039C15.7515 6.15039 15.5498 5.94868 15.5498 5.7002V4.65039H14.5C14.2515 4.65039 14.0498 4.44872 14.0498 4.2002C14.0498 3.95167 14.2515 3.75 14.5 3.75H15.5498V2.7002C15.5499 2.45173 15.7515 2.25 16 2.25Z" /></svg>');
    }

    ._detail-main {
      font-size: var(--font-size-300);
      line-height: 1.6;
      padding-top: calc(14 * var(--px-to-rem));
      text-align: center;
    }

    ._detail-note {
      font-size: var(--font-size-50);
      line-height: 2;
      padding-top: calc(4 * var(--px-to-rem));
      text-align: center;
    }

    ._cta {
      display: none;
    }

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

    ._background img {
      height: 100%;
      object-fit: contain;
      object-position: top right;
    }

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

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

      ._description {
        font-weight: var(--font-weight-regular);
        padding-top: calc(40 * var(--px-to-rem));
      }

      ._main {
        grid-template-columns: 1fr;
      }

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

      ._background {
        display: none;
      }
    }
  }
}

/**
 * =============================================================================
 *
 * Recommended section
 *
 * =============================================================================
 */
@layer projects {
  @scope (.scope.recommended) to (.scope) {
    :scope {
      background: #f7f2f2;
      display: grid;
      justify-items: center;
      padding-block: calc(100 * var(--px-to-rem));
      position: relative;
    }

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

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

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

    ._item {
      --_icon-size: calc(24 * var(--px-to-rem));
      align-items: center;
      background: var(--color-white);
      display: grid;
      font-size: var(--font-size-200);
      font-weight: var(--font-weight-medium);
      gap: calc(16 * var(--px-to-rem));
      grid-template-columns: var(--_icon-size) 1fr;
      letter-spacing: 0;
      line-height: 1;
      padding: calc(14 * var(--px-to-rem)) calc(20 * var(--px-to-rem));
    }

    ._item::before {
      aspect-ratio: 1 / 1;
      background: var(--color-accent);
      content: '';
      mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19.2929 5.29302C19.6834 4.90249 20.3164 4.90249 20.707 5.29302C21.0975 5.68354 21.0975 6.31655 20.707 6.70708L9.70696 17.7071C9.31643 18.0976 8.68342 18.0976 8.29289 17.7071L3.29289 12.7071C2.90237 12.3166 2.90237 11.6835 3.29289 11.293C3.68342 10.9025 4.31643 10.9025 4.70696 11.293L8.99992 15.586L19.2929 5.29302Z" /></svg>');
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: cover;
    }

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

      ._heading {
        font-size: var(--font-size-200);
        line-height: 1.69;
      }

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

      ._item {
        padding-block: calc(10 * var(--px-to-rem));
      }
    }
  }
}