/**
 * =============================================================================
 *
 * Cases section
 *
 * =============================================================================
 */
@layer projects {
  @scope (.scope.cases-header) to (.scope) {
    :scope {
      align-items: center;
      display: flex;
      justify-content: space-between;
    }

    ._total {
      font-size: var(--font-size-50);
      line-height: 2;
    }

    ._sort {
      --_padding-x: calc(27 * var(--px-to-rem));
      color: var(--color-accent);
      position: relative;
      transition: color var(--duration-default) var(--ease-custom);
    }

    ._sort::after {
      aspect-ratio: 1 / 1;
      background: currentColor;
      content: '';
      height: auto;
      inset-block: 0;
      margin-block: auto;
      mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.8613 4.8457L8 12.0117L1.13867 4.8457L1.86133 4.1543L8 10.5645L14.1387 4.1543L14.8613 4.8457Z" /></svg>');
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: cover;
      position: absolute;
      right: var(--_padding-x);
      width: calc(16 * var(--px-to-rem));
    }

    ._sort select {
      appearance: unset;
      border: 1px solid currentColor;
      border-radius: 9999px;
      display: flex;
      font-size: var(--font-size-200);
      font-size: var(--font-size-50);
      justify-content: space-evenly;
      letter-spacing: 0.1em;
      line-height: calc(16 * var(--px-to-rem));
      padding: calc(10 * var(--px-to-rem)) var(--_padding-x);
      transition-duration: var(--duration-default);
      transition-property: background, border-color;
      transition-timing-function: var(--ease-custom);
      width: calc(180 * var(--px-to-rem));
    }

    @media (hover: hover) and (pointer: fine) {
      ._sort:hover {
        color: var(--color-white);
      }

      ._sort:hover select {
        background: var(--color-accent);
        border-color: var(--color-accent);
      }
    }

    @media (width <= 767px) {
      ._sort {
        --_padding-x: calc(17 * var(--px-to-rem));
      }

      ._sort select {
        padding-block: calc(8 * var(--px-to-rem));
        width: calc(130 * var(--px-to-rem));
      }
    }
  }

  @scope (.scope.list) to (.scope) {
    :scope {
      display: grid;
      justify-items: center;
      padding-block: calc(80 * var(--px-to-rem));
    }

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

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

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

    ._cta {
      display: none;
    }

    ._empty {
      padding-top: calc(50 * var(--px-to-rem));
      text-align: center;
    }

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

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

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

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

    ._inner {
      align-items: center;
      display: grid;
      gap: calc(40 * var(--px-to-rem));
      grid-template-columns: auto 1fr;
      inline-size: var(--content-width);
    }

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

    ._main {
      letter-spacing: 0;
    }

    ._terms {
      display: flex;
      flex-wrap: wrap;
      gap: calc(14 * var(--px-to-rem));
    }

    ._term {
      background-color: rgb(from var(--color-accent) r g b / 0.3);
      border-radius: 5px;
      color: var(--color-white);
      font-family: var(--font-noto-sans);
      font-size: var(--font-size-200);
      font-weight: var(--font-weight-medium);
      line-height: 1;
      padding: calc(8 * var(--px-to-rem)) calc(24 * var(--px-to-rem));
    }

    ._title {
      border-bottom: 0.5px dashed var(--color-black);
      font-size: var(--font-size-400);
      font-weight: var(--font-weight-medium);
      line-height: 1;
      margin-block: 0;
      padding-block: calc(24 * var(--px-to-rem)) calc(20 * var(--px-to-rem));
    }

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

    ._details,
    ._details tbody {
      display: block;
    }

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

    ._details tr {
      align-items: center;
      border-bottom: 0.5px dashed var(--color-black);
      display: grid;
      font-size: var(--font-size-50);
      gap: calc(14 * var(--px-to-rem));
      grid-template-columns: auto 1fr;
      line-height: 2;
      padding-block: calc(8 * var(--px-to-rem));
    }

    ._details :where(th, td) {
      padding: 0;
    }

    ._details th {
      --_icon-size: calc(30 * var(--px-to-rem));
      --_text-width: calc(80 * var(--px-to-rem));
      align-items: center;
      border-right: 0.5px dashed var(--color-black);
      display: grid;
      font-weight: var(--font-weight-regular);
      gap: calc(14 * var(--px-to-rem));
      grid-template-columns: var(--_icon-size) var(--_text-width);
      padding-right: calc(14 * var(--px-to-rem));
      position: relative;
    }

    ._details th::before,
    ._details th::after {
      aspect-ratio: 1 / 1;
      content: '';
    }

    ._details th::before {
      background: #f7f2f2;
      border-radius: 100%;
    }

    ._details th::after {
      background: var(--color-accent);
      left: 0;
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: cover;
      position: absolute;
      width: var(--_icon-size);
      z-index: 1;
    }

    ._details th:where([data-icon='scene'])::after {
      mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M18.584 6.99902C18.7853 6.99902 18.948 7.16206 18.9482 7.36328V8.45801H20.1738L20.3975 8.46973C21.5006 8.5822 22.3623 9.51367 22.3623 10.6465V20.9912L22.3506 21.2148C22.2458 22.2443 21.4269 23.063 20.3975 23.168L20.1738 23.1797H9.8291L9.60547 23.168C8.57574 23.0634 7.75722 22.2445 7.65234 21.2148L7.63965 20.9912V10.6465C7.63965 9.51343 8.502 8.58188 9.60547 8.46973L9.8291 8.45801H10.9219V7.36328C10.9221 7.16214 11.0859 6.99916 11.2871 6.99902C11.4882 6.99929 11.6511 7.16222 11.6514 7.36328V8.45801H18.2197V7.36328C18.22 7.16214 18.3828 6.99916 18.584 6.99902ZM8.37012 20.9912C8.3705 21.7966 9.02368 22.4501 9.8291 22.4502H20.1738C20.9789 22.4497 21.6324 21.7963 21.6328 20.9912V12.2285H8.37012V20.9912ZM12.1846 16C12.3858 16.0003 12.5488 16.164 12.5488 16.3652C12.5486 16.5663 12.3856 16.7292 12.1846 16.7295H10.2666C10.0654 16.7294 9.90163 16.5664 9.90137 16.3652C9.90137 16.1639 10.0653 16.0001 10.2666 16H12.1846ZM15.832 16C16.0333 16.0003 16.1963 16.164 16.1963 16.3652C16.196 16.5663 16.0331 16.7292 15.832 16.7295H13.9141C13.7129 16.7294 13.5491 16.5664 13.5488 16.3652C13.5488 16.1639 13.7127 16.0001 13.9141 16H15.832ZM19.4795 16C19.6807 16.0003 19.8438 16.164 19.8438 16.3652C19.8435 16.5663 19.6805 16.7292 19.4795 16.7295H17.5615C17.3604 16.7294 17.1966 16.5664 17.1963 16.3652C17.1963 16.1639 17.3602 16.0001 17.5615 16H19.4795ZM12.1846 14C12.3858 14.0003 12.5488 14.164 12.5488 14.3652C12.5486 14.5663 12.3856 14.7292 12.1846 14.7295H10.2666C10.0654 14.7294 9.90163 14.5664 9.90137 14.3652C9.90137 14.1639 10.0653 14.0001 10.2666 14H12.1846ZM15.832 14C16.0333 14.0003 16.1963 14.164 16.1963 14.3652C16.196 14.5663 16.0331 14.7292 15.832 14.7295H13.9141C13.7129 14.7294 13.5491 14.5664 13.5488 14.3652C13.5488 14.1639 13.7127 14.0001 13.9141 14H15.832ZM19.4795 14C19.6807 14.0003 19.8438 14.164 19.8438 14.3652C19.8435 14.5663 19.6805 14.7292 19.4795 14.7295H17.5615C17.3604 14.7294 17.1966 14.5664 17.1963 14.3652C17.1963 14.1639 17.3602 14.0001 17.5615 14H19.4795ZM9.8291 9.1875C9.02344 9.18763 8.37012 9.84079 8.37012 10.6465V11.499H21.6328V10.6465C21.6328 9.84103 20.9792 9.18802 20.1738 9.1875H18.9482V10.2812C18.9481 10.4826 18.7853 10.6465 18.584 10.6465C18.3827 10.6464 18.2199 10.4825 18.2197 10.2812V9.1875H11.6514V10.2812C11.6512 10.4824 11.4882 10.6462 11.2871 10.6465C11.0859 10.6464 10.922 10.4825 10.9219 10.2812V9.1875H9.8291Z" /></svg>');
    }

    ._details th:where([data-icon='trouble'])::after {
      mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M18.0876 9.37183C19.1688 9.37183 20.1637 9.78841 20.8884 10.5457C21.6046 11.2941 21.9988 12.3172 21.9988 13.4255C21.9987 14.5661 21.5573 15.6106 20.6101 16.7117C19.7627 17.6968 18.5446 18.6965 17.1345 19.8542C16.6527 20.2498 16.1065 20.698 15.5398 21.1755C15.3902 21.3017 15.198 21.3718 14.9988 21.3718C14.7995 21.3718 14.6075 21.3019 14.4578 21.1755C13.8922 20.6991 13.347 20.2511 12.866 19.8562L12.863 19.8542C11.4528 18.6964 10.2348 17.6967 9.38745 16.7117C8.44025 15.6105 7.99889 14.5661 7.99878 13.4255C7.99878 12.3172 8.39296 11.2941 9.10913 10.5457C9.83385 9.78838 10.8287 9.37183 11.9099 9.37183C12.7179 9.37185 13.4578 9.61797 14.1091 10.1033C14.4379 10.3483 14.7362 10.648 14.9988 10.9978C15.2614 10.648 15.5596 10.3483 15.8884 10.1033C16.5398 9.61795 17.2796 9.37187 18.0876 9.37183ZM18.0876 10.1619C17.4655 10.1619 16.8938 10.3525 16.3894 10.7283C15.94 11.0633 15.6267 11.4867 15.4431 11.783C15.3487 11.9353 15.1828 12.0261 14.9988 12.0261C14.8148 12.0261 14.6489 11.9353 14.5544 11.783C14.371 11.4867 14.0577 11.0633 13.6082 10.7283C13.1037 10.3525 12.532 10.1619 11.9099 10.1619C11.0605 10.1619 10.2803 10.4887 9.71265 11.0818C9.13651 11.6839 8.81909 12.5163 8.81909 13.4255C8.8192 14.3846 9.18886 15.2425 10.0183 16.2068C10.8203 17.1392 12.014 18.1186 13.3953 19.2527L13.3972 19.2556C13.8801 19.6521 14.4281 20.1009 14.9978 20.5808C15.5708 20.1 16.1195 19.6497 16.6033 19.2527C17.9843 18.1187 19.1773 17.1391 19.9792 16.2068C20.8086 15.2424 21.1784 14.3846 21.1785 13.4255C21.1785 12.5163 20.8611 11.6839 20.2849 11.0818C19.7173 10.4887 18.937 10.1619 18.0876 10.1619Z" /></svg>');
    }

    ._details th:where([data-icon='service'])::after {
      mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M16.9509 7.00164C18.7105 6.96714 20.3656 7.63321 21.6101 8.87762C22.8543 10.122 23.5203 11.7765 23.486 13.5358V13.5554C23.4715 14.3028 22.9517 14.9401 22.2224 15.1042L17.0749 16.2604C17.0656 16.2625 17.056 16.2641 17.0466 16.2653L10.7302 22.5807C10.46 22.8509 10.1006 22.9997 9.71846 22.9997C9.33633 22.9996 8.97694 22.8509 8.70674 22.5807L7.91572 21.7897C7.35829 21.2318 7.35805 20.3241 7.91572 19.7663L14.363 13.32L15.3972 8.29363C15.5507 7.5477 16.1894 7.01665 16.9509 7.00164ZM8.35811 20.2087C8.04381 20.5231 8.04376 21.034 8.35811 21.3483L8.48799 21.4792L9.66475 20.3024C9.78665 20.1807 9.98417 20.1808 10.1062 20.3024C10.2281 20.4244 10.228 20.6219 10.1062 20.7438L8.93037 21.9206L9.14814 22.1393C9.30038 22.2915 9.50317 22.3756 9.71846 22.3757C9.93377 22.3756 10.1365 22.2916 10.2888 22.1393L13.7106 18.7165L11.78 16.7858L8.35811 20.2087ZM10.694 19.3991C10.7762 19.3991 10.8567 19.4328 10.9147 19.4909C10.9728 19.5489 11.0065 19.6295 11.0065 19.7116C11.0064 19.794 10.9728 19.874 10.9147 19.9323C10.8567 19.9903 10.7761 20.0241 10.694 20.0241C10.612 20.024 10.5314 19.9903 10.4733 19.9323C10.4154 19.874 10.3816 19.7939 10.3815 19.7116C10.3815 19.6296 10.4154 19.5489 10.4733 19.4909C10.5314 19.4328 10.612 19.3992 10.694 19.3991ZM12.2214 16.3444L14.153 18.2751L16.5183 15.9098L14.5876 13.9782L12.2214 16.3444ZM16.9636 7.62567C16.4957 7.63479 16.1028 7.96133 16.0085 8.41961L14.9685 13.4763L15.152 13.6598L16.0769 11.5212C16.1452 11.3629 16.3287 11.2897 16.487 11.3581C16.6452 11.4265 16.7182 11.61 16.6501 11.7682L15.6276 14.1345L15.777 14.2848L16.9743 13.0876C17.0963 12.9661 17.2939 12.9659 17.4157 13.0876C17.5376 13.2095 17.5376 13.408 17.4157 13.53L16.2185 14.7263L16.3757 14.8835L18.7419 13.86C18.9001 13.7919 19.0836 13.865 19.152 14.0231C19.2204 14.1812 19.1478 14.3646 18.9899 14.4333L16.8503 15.3581L17.1062 15.613L22.0847 14.4948C22.5327 14.3941 22.852 14.0027 22.861 13.5436L22.862 13.5241C22.893 11.9361 22.2908 10.4431 21.1677 9.32C20.0445 8.19687 18.5525 7.59464 16.9636 7.62567ZM18.0183 12.1638C18.1005 12.1639 18.181 12.1967 18.239 12.2546C18.2971 12.3127 18.3298 12.3941 18.3298 12.4763C18.3297 12.5583 18.2969 12.639 18.239 12.697C18.181 12.7549 18.1002 12.7876 18.0183 12.7878C17.9361 12.7878 17.8547 12.755 17.7966 12.697C17.7386 12.639 17.7059 12.5582 17.7058 12.4763C17.7058 12.3941 17.7385 12.3127 17.7966 12.2546C17.8547 12.1965 17.9362 12.1638 18.0183 12.1638Z" /></svg>');
    }

    ._image {
      aspect-ratio: 1 / 1;
      overflow: hidden;
      position: relative;
      width: calc(332 * var(--px-to-rem));
    }

    :where(._before, ._after) {
      --_transition-scale: 1.025;
      --_transition-translate: 15px;
      background: #f7f2f2;
      display: grid;
      height: 100%;
      left: 0;
      overflow: hidden;
      place-items: center;
      position: absolute;
      scale: 1;
      top: 0;
      transition-duration: var(--duration-slowly);
      transition-property: opacity, scale, translate, visibility;
      transition-timing-function: var(--ease-custom);
      width: 100%;
    }

    :where(._before, ._after):not(:has(img))::after {
      aspect-ratio: 458 / 150;
      background: var(--color-accent);
      content: '';
      height: auto;
      mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 458 150" xmlns="http://www.w3.org/2000/svg"><path d="M139.34 49.1191C139.014 52.9139 139.227 60.4446 139.226 64.4902L139.23 121.575C139.23 126.955 139.102 132.463 139.498 137.824C139.668 140.136 140.379 142.702 141.877 144.503C143.129 146.106 146.671 146.754 147.334 147.425L147.183 147.741C142.611 148.849 131.743 147.684 126.675 147.776C124.394 147.817 121.715 145.256 121.54 143.001C121.145 137.921 121.005 131.45 121.389 126.306C115.716 136.828 107.529 144.652 95.8809 148.404C93.794 149.076 89.3594 149.499 88.0264 150H80.168C77.9017 149.363 75.5126 149.25 73.2412 148.55C54.3323 142.719 52.7629 121.768 52.3828 105.689C52.2548 96.8305 52.2291 87.9698 52.3047 79.1104C52.3087 76.342 52.3061 73.7234 52.3115 70.8008C52.3162 68.3394 52.526 62.8088 49.4131 61.8115C48.4316 61.4972 45.7322 62.4818 44.291 62.2637L44.2061 61.9541C46.2738 60.1289 66.5426 50.8058 70.2627 49.165L70.2568 81.4863C70.2597 86.7214 70.303 91.956 70.3867 97.1904C70.5188 112.207 70.1017 145.459 91.585 145.509C103.919 145.539 117.28 133.214 120.958 121.948C121.572 120.068 121.264 108.315 121.264 105.557L121.259 69.0674C121.241 66.1956 121.381 61.7676 117.271 61.8027C115.398 61.8188 113.609 62.6595 111.757 62.8848C114.401 60.7536 118.042 59.3912 121.09 57.8281C127.025 54.7855 133.413 52.0911 139.34 49.1191ZM418.833 47.5889C427.671 46.8982 457.342 49.1379 445.948 64.6396C439.711 71.7267 434.056 61.1757 429.693 57.4727C426.535 54.7916 423.795 52.6155 419.531 51.709C411.305 49.9605 402.973 52.0768 397.241 58.4053C389.949 66.4576 388.22 77.7178 388.707 88.1982C389.481 104.376 396.083 120.66 408.036 131.823C423.592 146.272 443.509 146.304 458 130.489V132.807C451.761 140.33 445.81 144.457 436.35 147.427C433.51 148.319 430.511 149.057 427.541 149.373C425.522 149.588 423.359 149.624 421.373 150H421.17C418.934 149.526 416.013 149.494 413.638 149.096C390.425 144.928 377.477 125.005 375.39 102.991C372.666 74.2388 389.036 49.9178 418.833 47.5889ZM246.686 71.6367C255.412 53.8778 274.008 41.2879 294.408 49.71C311.952 56.9521 311.509 85.0229 311.516 101.172L311.523 125.368C311.525 131.149 311.076 136.374 312.679 142.05C313.929 146.476 319.093 146.29 319.623 147.735C318.375 148.164 288.307 148.189 285.373 147.797L285.215 147.576C286.297 146.242 291.429 146.273 292.469 141.631C294.117 134.281 293.543 126.642 293.552 119.146C293.567 104.29 293.869 89.2871 291.924 74.5352C291.257 69.7515 289.994 64.5823 287.735 60.3271C277.03 40.1631 252.281 59.7576 248.101 74.5781C247.332 77.3052 248.78 82.3994 248.695 85.3867C248.615 88.2663 248.85 91.1591 248.874 94.0312C249.279 103.742 248.807 113.042 249.004 122.801C249.127 128.858 248.203 137.57 250.704 143.178C251.781 145.596 254.756 146.473 257.133 147.141L256.905 147.754C256.151 148.14 225.786 148.132 223.135 147.874L222.993 147.55C224.006 146.191 227.04 146.505 228.689 144.006C230.004 142.245 230.615 139.58 230.771 137.385C231.234 130.888 231.017 124.163 231.006 117.64C230.977 103.253 231.469 89.1259 229.456 74.8047C228.477 67.8438 226.227 58.6672 220.162 54.0996C207.038 45.4682 188.542 62.7769 185.382 75.1924C184.959 76.8562 185.145 83.07 185.146 84.8486L185.164 103.041L185.152 124.904C185.145 129.465 184.957 134.151 185.516 138.736C185.879 141.714 187.048 144.76 190.041 146.199C190.99 146.655 192.228 146.601 193.254 147.358L193.28 147.725C192.206 148.247 159.277 148.03 159.006 147.833C158.98 147.697 158.951 147.549 158.92 147.389C160.557 146.249 163.864 145.835 164.834 144.148C165.788 142.488 166.632 140.06 166.788 138.374C167.284 132.999 167.118 127.391 167.119 121.995L167.118 77.0762C167.117 72.9646 167.377 68.3334 166.654 64.3311C165.904 60.1775 160.199 62.3446 157.694 62.9346C160.228 60.5995 181.309 50.9854 185.19 49.1533C185.012 55.8307 185.163 63.2416 185.163 69.9746C190.361 58.0669 203.54 47.6257 216.876 47.375C222.363 46.6594 230.192 48.2557 234.848 51.2959C242.212 56.1044 244.908 63.5333 246.686 71.6367ZM356.699 49.4668C356.927 49.4295 357.088 49.5224 357.309 49.6074C357.66 55.5484 357.345 64.9808 357.345 71.1357L357.334 126.896C357.334 131.752 357.041 137.225 358.501 141.891C359.856 146.223 363.274 146.091 366.615 147.753C364.204 148.136 332.368 148.215 330.887 147.782C331.294 146.581 334.336 146.664 336.409 144.761C338.801 142.564 339.173 137.981 339.336 134.839C339.537 130.949 339.419 126.306 339.421 122.353L339.416 78.7783C339.416 74.9563 339.484 71.1086 339.354 67.29C339.101 59.9421 334.872 61.795 329.968 62.9238C332.354 60.608 352.541 51.518 356.699 49.4668ZM24.2637 0C24.5111 4.20325 24.3951 9.14282 24.3945 13.4062L24.3867 124.407C24.3748 130.126 23.3076 140.401 27.3848 144.875C28.5697 146.175 32.0322 146.832 32.415 147.339L32.3584 147.772C31.4401 148.205 3.17975 147.997 0 147.975V146.646C6.9067 145.126 6.23555 135.557 6.25098 130.175C6.26785 124.296 6.22971 118.407 6.22949 112.527L6.24316 32.6885C6.24764 28.443 6.4919 18.9121 6.01465 14.959C5.33274 13.8745 5.07659 13.6158 4.14648 12.7246C2.50061 12.5223 1.62574 12.605 0 12.7188V11.5449C1.48417 10.9852 7.59685 7.93018 9.33691 7.04297C13.5042 4.91811 20.1448 2.23776 23.8662 0H24.2637ZM343.92 15.3926C349.885 14.4072 355.516 18.4405 356.484 24.3887C357.45 30.3369 353.382 35.9356 347.411 36.877C341.469 37.8134 335.888 33.7852 334.926 27.8682C333.964 21.9511 337.985 16.3728 343.92 15.3926Z" /></svg>');
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: cover;
      text-transform: uppercase;
      width: 40%;
    }

    ._gallery:has([value='after']:checked) ._before {
      opacity: 0;
      scale: var(--_transition-scale);
      translate: var(--_transition-translate) 0;
    }

    ._gallery:has([value='before']:checked) ._after {
      opacity: 0;
      scale: var(--_transition-scale);
      translate: calc(var(--_transition-translate) * -1) 0;
    }

    ._switch-inner {
      --_padding-y: calc(3 * var(--px-to-rem));
      --_padding-x: calc(6 * var(--px-to-rem));
      background: rgba(73, 71, 71, 0.05);
      border-radius: 9999px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: var(--_padding-y) var(--_padding-x);
      position: relative;
    }

    ._switch-inner::before {
      background: var(--color-accent);
      border-radius: 9999px;
      content: '';
      height: calc(100% - (var(--_padding-y) * 2));
      inset-block: 0;
      left: var(--_padding-x);
      margin-block: auto;
      position: absolute;
      transition: left var(--duration-quickly) var(--ease-custom);
      width: calc(50% - var(--_padding-x));
      z-index: -1;
    }

    ._switch-inner:has([value='after']:checked)::before {
      left: 50%;
    }

    ._switch-input {
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    ._switch-label {
      border-radius: 9999px;
      cursor: pointer;
      display: grid;
      font-family: var(--font-futura);
      font-size: var(--font-size-200);
      letter-spacing: 0;
      line-height: 1.2;
      padding-block: calc(10 * var(--px-to-rem));
      place-items: center;
    }

    ._switch-input:checked + ._switch-label {
      color: var(--color-white);
    }

    ._switch-input:focus-visible + ._switch-label {
      outline: 3px solid #005fcc;
      outline-offset: 3px;
    }

    ._cta {
      display: none;
    }

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

      ._inner {
        gap: calc(30 * var(--px-to-rem));
        grid-template-columns: 1fr;
        padding-bottom: calc(20 * var(--px-to-rem));
        padding-inline: calc(9 * var(--px-to-rem));
      }

      ._gallery {
        gap: calc(12 * var(--px-to-rem));
      }

      ._image {
        width: 100%;
      }

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

      ._details tr:last-of-type {
        border-bottom: 0;
        padding-bottom: 0;
      }

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

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

    ._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-align: inherit;
      text-transform: uppercase;
    }

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

    ._heading {
      text-align: center;
    }

    ._main {
      --_line-height: 2;
      --_font-size: var(--font-size-50);
      display: grid;
      font-size: var(--_font-size);
      gap: calc(var(--_font-size) * var(--_line-height));
      line-height: var(--_line-height);
      padding-top: calc(24 * var(--px-to-rem));
      text-align: center;
    }

    ._main p {
      text-align: inherit;
      word-break: keep-all;
    }

    @media (width <= 767px) {
      :scope {
        padding-block: calc(80 * 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);
      }
    }
  }
}

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

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

    ._heading {
      color: var(--color-accent);
      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;
      text-align: center;
      word-break: keep-all;
    }

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

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

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

    ._more:active {
      scale: 0.95;
    }

    @media (hover: hover) and (pointer: fine) {
      ._more:hover {
        background: transparent;
        border-color: currentColor;
        color: var(--color-accent);
      }
    }

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

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

      ._more {
        font-size: var(--font-size-200);
        padding: calc(18 * var(--px-to-rem)) 0;
        width: 100%;
      }

      ._description {
        line-height: 2;
      }
    }
  }
}