@import url("base.css");

:root {
  --background: #ffffff;
  --foreground: oklch(20.702% 0.02268 257.311);
  --primary: #3e8ed0;
  --primary-foreground: #edf2f9;

  --font-sans: "Plus Jakarta Sans", sans-serif;

  --container: 80rem;
  --container-narrow: 64rem;
  --offset: clamp(1.125rem, 4vw, 2rem);
  --tooltip-width: 20rem;
}

body {
  transition: all 0.3s var(--ease-in-quart);
}

main {
  overflow-x: clip;
}

.container {
  width: min(var(--container), 100%);
  padding-inline: var(--offset);
  margin-inline: auto;

  &.narrow {
    width: min(var(--container-narrow), 100%);
  }

  &.center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.site-header {
  height: 4.125rem;
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  position: sticky;
  z-index: 7;
  top: 0;
  @media (width >= 64rem) {
    height: 5.25rem;
  }
}

:is(.is-open, .scrolling) .site-header {
  transition: border-color 0.3s var(--ease-out-quad) 0.05s;
  border-bottom-color: transparent;
}

.header-inner {
  display: flex;
  justify-content: space-between;
}

.site-logo {
  height: 4.125rem;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding-block: 0.75rem;

  @media (width >= 64rem) {
    height: 5.25rem;
  }

  .logo {
    width: auto;
    height: 100%;
    display: grid;
  }
}

.nav-wrap {
  flex: 1;
  display: flex;
  justify-content: space-between;

  @media (width >= 48rem) {
    margin-inline-start: 2rem;
  }

  .btn-wrap {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
    overflow: hidden;

    @media (width >= 62rem) {
      gap: 0.75rem;
    }

    .button {
      &.icon {
        border-radius: 0rem;
        color: color-mix(in oklab, var(--foreground) 70%, transparent);
        &:has(.line) {
          padding-inline: 0.5rem;
        }
      }

      & > svg {
        width: 1.25rem;
        height: 1.25rem;
        color: currentColor;
      }

      &.js-search {
        margin-left: 0.5rem;
      }

      &.js-menu-toggle {
        margin-right: -0.5rem;
        visibility: visible;
        z-index: 100;

        @media (width >= 64rem) {
          display: none;
          visibility: hidden;
        }

        .line {
          height: 1.5px;
          flex-shrink: 0;
          display: block;
          background-color: var(--foreground);
          transform: translateY(-50%);
          position: absolute;
          right: 0.5rem;
          left: 0.5rem;
          top: 50%;

          &::before,
          &::after {
            content: "";
            width: 100%;
            height: 1.5px;
            display: block;
            background-color: var(--foreground);
            transition-timing-function: var(--ease-out-quad);
            position: absolute;
            left: 0;
          }

          &::before {
            top: -7px;
          }

          &::after {
            bottom: -7px;
          }
        }
      }

      &.js-menu-toggle--htx .line {
        transition: background-color 0s 0.3s;

        &::after,
        &::before {
          transition-duration: 0.5s, 0.5s;
          transition-delay: 0.3s, 0s;
        }

        &::before {
          transition-property: top, transform;
        }

        &::after {
          transition-property: bottom, transform;
        }
      }

      &.js-menu-toggle--htx.is-active {
        &::before {
          opacity: 1;
          visibility: visible;
        }

        .line {
          background: 0 0;

          &::before {
            top: 0;
            transform: rotate(45deg);
          }

          &::after {
            bottom: 0;
            transform: rotate(-45deg);
          }

          &::after,
          &::before {
            transition-delay: 0s, 0.3s;
          }
        }
      }
    }
  }
}

.site-nav {
  width: 100%;
  height: 100dvh;
  max-width: 28rem;
  display: flex;
  align-items: flex-start;
  background-color: var(--background);
  transition: transform 0.3s var(--ease-out-quad);
  transform: translateX(100%);
  position: fixed;
  z-index: 10;
  right: 0;
  top: 4.125rem;

  @media (width >= 48rem) {
    top: 0;
  }

  @media (width >= 64rem) {
    width: auto;
    height: auto;
    max-width: fit-content;
    background-color: transparent;
    align-items: stretch;
    transform: translateX(0);
    position: relative;
  }

  .css-navList {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    @media (width >= 48rem) {
      border-top: 1px solid var(--border);
    }
    @media (width >= 64rem) {
      align-items: center;
      flex-direction: row;
      border-top-width: 0;
      gap: 1.375rem;
    }
  }
}

.is-open .site-nav {
  padding-top: 1.25rem;
  transform: translateX(0);
  border-top: 1px solid var(--border);
  @media (width >= 48rem) {
    padding-top: 3.75rem;
  }
  @media (width >= 64rem) {
    padding-top: 0;
    transform: translateX(0);
    border-top-width: 0;
  }
}

.css-navItem {
  height: 100%;
  display: block;
  position: relative;
  border-bottom: 1px solid var(--border);

  @media (width >= 64rem) {
    height: auto;
    border-bottom-width: 0;
  }

  /* .dropdown-menu {
    display: none;

    @media (width >= 64rem) {
      width: 14rem;
      display: flex;
      flex-direction: column;
      background-color: var(--muted);
      transform: translateY(-1rem);
      transition-property: transform, opacity, visibility;
      transition-timing-function: var(--ease-out-quart);
      transition-duration: 0.4s;
      padding: 0.75rem;
      opacity: 0;
      visibility: hidden;
      position: absolute;
      z-index: 1;
      top: 4.5rem;
      left: 0;

      .css-navLink {
        height: auto;
      }
    }
  }

  &:hover .dropdown-menu {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
  } */

  .css-navLink {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.75rem;
    padding-inline: var(--offset);
    color: color-mix(in oklab, var(--foreground) 70%, transparent);
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    cursor: pointer;

    @media (width >= 64rem) {
      font-size: 0.8125rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding-block: 0.625rem;
      padding-inline: 0;

      background: linear-gradient(var(--primary), var(--primary)) right bottom /
        0% 2px no-repeat;
      transition-property: color, background-size;
      transition-duration: 0.7s, 0.3s;
      transition-timing-function: var(--ease-out-quart);

      &:hover {
        color: var(--foreground);
        background-size: 100% 2px;
        background-position-x: left;
      }
    }

    & > svg {
      width: 1.5rem;
      height: 1.5rem;
      transition: transform 0.3s var(--ease-out-quart);
      color: currentColor;

      @media (width >= 64rem) {
        width: 1.125rem;
        height: 1.125rem;
        display: none;
      }
    }
  }

  &.active .css-navLink {
    color: color-mix(in oklab, var(--foreground) 90%, transparent);
    background-size: 100% 2px;
  }

  &.has-children.active .css-navLink > svg {
    transform: rotate(90deg);
  }
}

.css-subNav {
  width: 100%;
  height: 100dvh;
  max-width: 28rem;
  display: flex;
  background-color: var(--background);
  flex-direction: column;
  padding-top: 2.75rem;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-in-quart);
  position: fixed;
  z-index: 11;
  bottom: 0;
  right: 0;
  top: 0;

  @media (width >= 48rem) {
    padding-top: 4.75rem;
  }
  @media (width >= 64rem) {
    display: none;
  }

  .sub-navHeader {
    width: 100%;
    display: flex;
    border-bottom: 1px solid var(--border);

    @media (width >= 48rem) {
      border-top: 1px solid var(--border);
    }

    .close {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      color: var(--muted-foreground);
      padding: 0.75rem var(--offset);
      font-size: 1rem;
      cursor: pointer;

      & > svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        display: inline-block;
        transform: rotate(180deg);
        margin-inline-end: 0.5rem;
        fill: currentColor;
      }
    }

    @media (width >= 64rem) {
      display: none;
    }
  }
}

.is-open .css-subNav.is-active {
  transform: translateX(0%);
}

.overlay {
  display: none;

  @media (width >= 48rem) {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition:
      opacity 0.4s,
      visibility 0s 0.4s;
    background: var(--foreground);
    visibility: hidden;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
  }
  @media (width >= 64rem) {
    display: none;
  }
}

.is-open .overlay {
  opacity: 0.5;
  transition: opacity 0.4s;
  visibility: visible;
}

.breadcrumb-top {
  width: 100%;
  padding-block: 1rem;
  border-bottom: 1px solid var(--border);
}

.breadcrumb {
  display: flex;
  align-items: center;
  overflow: hidden;

  li {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--muted-foreground);

    & > * {
      font-weight: 500;
      font-size: 0.875rem;
      line-height: 1.5rem;
      letter-spacing: 0;
    }

    &:has(> a) {
      display: none;
      color: var(--foreground);

      @media (width >= 48rem) {
        display: inline-flex;
      }
    }

    .breadcrumb-separator {
      font-size: 1rem;
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
      padding-inline: 0.5rem;
    }

    [aria-current="page"] {
      color: var(--muted-foreground);
      display: -webkit-box;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      line-clamp: 1;
    }

    a {
      transition: color 0.3s var(--ease-out-quad);

      &:hover {
        color: var(--muted-foreground);
      }
    }
  }
}

.slider-container {
  width: 100%;
  height: calc(100vh - 4.75rem);
  overflow: hidden;
  background-color: var(--foreground);
  position: relative;

  @media (width >= 64rem) {
    height: 100vh;
  }

  .slider {
    display: flex;
    height: 100%;
    position: relative;

    .slider-stats {
      position: absolute;
      z-index: 2;
      inset-inline: 0;
      bottom: 3rem;

      .container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));

        :where(& > :not(:first-child)) {
          margin-inline-start: 1.5rem;
        }

        /* :where(& > :last-child) {
          padding-inline-end: 0;
          margin-inline-end: 0;
        } */

        .slider-stat {
          display: flex;
          flex-direction: column;
          padding-inline: 1.5rem;
          border-left: 1px solid
            color-mix(in oklch, var(--border) 30%, transparent);
          gap: 0.25rem;

          .stat-value {
            font-weight: 700;
            font-size: 1.5rem;
            line-height: 1.25;
            color: var(--primary-foreground);

            @media (width >= 48rem) {
              font-size: 2.5rem;
            }
          }

          .stat-label {
            font-weight: 500;
            font-size: 0.875rem;
            line-height: calc(1.25 / 0.875);
            color: color-mix(
              in oklch,
              var(--primary-foreground) 80%,
              transparent
            );
          }
        }
      }
    }

    .slide {
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity 0.75s var(--ease-out-quart),
        visibility 0s linear 0.75s;
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;

      &::after {
        content: "";
        width: 100%;
        height: 100%;
        opacity: 0.55;
        background: linear-gradient(
          90deg,
          var(--foreground) 0,
          color-mix(in oklab, var(--foreground) 20%, transparent)
        );
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
      }

      & > picture {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;

        & > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .slide-content {
        height: auto;
        color: var(--primary-foreground);
        transform: translateY(-50%);
        position: absolute;
        z-index: 1;
        top: 50%;
        right: 0;
        left: 0;

        .slider-header-wrap,
        .slider-description-wrap {
          display: flex;
          align-items: flex-start;
        }

        .slider-header-wrap .max-w-lg {
          width: 100%;
          max-width: 42rem;
          overflow: hidden;

          h1 {
            display: inline-block;
            font-weight: 600;
            font-size: 2.625rem;
            line-height: 1.125;
            letter-spacing: 0.02em;
            transform: translate3d(5px, 150px, 0);

            @media (width >= 62rem) {
              font-size: 4rem;
              line-height: 1.25;
            }
          }
        }

        .slider-description-wrap {
          justify-content: flex-start;

          .hero-description {
            width: auto;
            display: flex;
            flex-flow: column;
            grid-column-gap: 1.5rem;
            grid-row-gap: 1.5rem;
            margin-top: 1.5rem;
            overflow: hidden;

            @media (width >= 48rem) {
              width: 52%;
            }

            @media (width >= 62rem) {
              grid-column-gap: 4rem;
              grid-row-gap: 4rem;
            }

            p {
              font-weight: 500;
              font-size: 1.125rem;
              line-height: 130%;
              transform: translateY(90px);

              @media (width >= 48rem) {
                font-size: 1.25rem;
              }
            }
          }
        }

        .slider-button-wrap {
          display: flex;
          gap: 1rem;
          flex-wrap: wrap;
          transform: translateY(90px);
        }

        .slider-header-wrap .max-w-lg h1,
        .slider-description-wrap .hero-description p,
        .slider-button-wrap {
          will-change: transform;
          transform-origin: center center;
          transition: transform 0.75s 0.1s var(--ease-out-quart);
          backface-visibility: hidden;
        }
      }

      &.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 1;
        transition: opacity 0.6s var(--ease-in-quart);

        .slide-content .slider-header-wrap .max-w-lg h1,
        .slide-content .slider-description-wrap .hero-description p,
        .slide-content .slider-button-wrap {
          transform: translate3d(0, 0, 0);
        }

        .slide-content .slider-header-wrap .max-w-lg h1 {
          transition-delay: 0.1s;
        }
        .slide-content .slider-description-wrap .hero-description p {
          transition-delay: 0.3s;
        }

        .slide-content .slider-button-wrap {
          transition-delay: 0.5s;
        }
      }
    }
  }
}

.page-banner {
  width: 100%;
  background-color: var(--muted);
  padding-bottom: 160%;
  position: relative;
  z-index: 0;

  @media (width >= 23.4375rem) {
    padding-bottom: 140%;
  }
  @media (width >= 36rem) {
    padding-bottom: 90%;
  }

  @media (width >= 48rem) {
    padding-bottom: 66.66%;
  }

  @media (width >= 64rem) {
    padding-bottom: 43%;
  }

  .bg {
    background-color: var(--foreground);
    position: absolute;
    inset: 0;

    &::before,
    &::after {
      content: "";
      display: block;
      opacity: 0.1;
      background-color: var(--primary);
      border-radius: var(--radius-full);
      position: absolute;
    }

    &::before {
      width: 12rem;
      height: 12rem;
      filter: blur(2.5rem);
      bottom: 2.5rem;
      left: 5rem;
    }

    &::after {
      width: 18rem;
      height: 18rem;
      filter: blur(4rem);
      right: 5rem;
      top: 2.5rem;
    }
  }

  & + .article {
    padding-top: 2.75rem;
  }

  &:has(> picture),
  &:has(> .bg-image) {
    .bg {
      &::before,
      &::after {
        display: none;
      }
    }
  }

  &:has(> .bg) {
    &::after {
      display: none;
    }
  }

  &::after {
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background: linear-gradient(
      90deg,
      var(--foreground) 0,
      color-mix(in oklab, var(--foreground) 20%, transparent)
    );
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
  }

  & > .bg-image,
  & > picture {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
  }

  & > .bg-image {
    background-position-x: 75%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
  }

  & > picture {
    & > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .page-banner-content {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;

    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;

      .page-banner-content-inner {
        display: flex;
        row-gap: 1.125rem;
        flex-direction: column;
        transform: translateY(-50%);
        position: absolute;
        right: var(--offset);
        left: var(--offset);
        top: 50%;

        @media (width >= 50rem) {
          right: unset;
        }

        .page-banner-title {
          width: 100%;
          font-weight: 600;
          font-size: 2.25rem;
          color: var(--primary-foreground);
          text-wrap: pretty;
          line-height: 1.25;

          @media (width >= 36rem) {
            font-size: 2.375rem;
          }

          @media (width >= 48rem) {
            max-width: 38rem;
          }

          @media (width >= 62rem) {
            max-width: 44rem;
            font-size: 4rem;
          }
        }

        .page-banner-description {
          width: 100%;
          max-width: 38rem;

          & > p {
            font-weight: 500;
            font-size: 1.125rem;
            line-height: calc(1.5 / 1.125);
            color: var(--background);

            @media (width >= 48rem) {
              font-size: 1.25rem;
              line-height: calc(1.75 / 1.25);
            }
          }
        }
      }

      .btn-wrap {
        position: absolute;
        bottom: -1.75rem;
        left: var(--offset);

        .button {
          &.primary {
            &:not(*:disabled) {
              &:hover {
                @media (hover: hover) {
                  background-color: var(--primary);
                }

                & > svg {
                  transform: translateY(0.375rem);
                }
              }
            }
          }

          & > svg {
            width: 1.5rem;
            height: 1.5rem;
            fill: currentColor;
            transition: transform 0.3s var(--ease-out-quad);
          }
        }
      }
    }
  }
}

.search-view {
  padding-top: 2rem;
  position: relative;
  @media (width >= 64rem) {
    padding-top: 2.5rem;
  }

  .search-box {
    width: 100%;
    margin-inline: auto;
    margin-bottom: 2.5rem;
    position: relative;

    .search-form {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
  }

  .search-count {
    font-weight: 500;
    font-size: 0.8125rem;
    color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);

    @media (width >= 64rem) {
      box-sizing: border-box;
      display: inline-block;
      position: relative;
      z-index: 2;
    }
  }

  .search-empty {
    width: 100%;
    font-size: 0.9375rem;
    margin-block-end: 1.25rem;
    text-align: center;

    @media (width >= 64rem) {
      font-size: 0.875rem;
    }
  }

  & + .prd-wrapper {
    padding-block-start: 2.25rem;
  }
}

section {
  width: 100%;
  padding-block: 3rem;

  @media (width >= 62rem) {
    padding-block: 5rem;
  }

  &.bg-muted {
    background-color: var(--muted);
  }

  &.bg-foreground {
    background-color: var(--foreground);

    .page-header {
      .page-header-heading {
        color: var(--primary-foreground);
      }
      .page-header-description {
        color: color-mix(in oklab, var(--background) 80%, transparent);
        text-transform: uppercase;

        &:has(> p:only-child) > p {
          color: color-mix(
            in oklab,
            var(--background) 80%,
            transparent
          ) !important;
        }
      }
    }

    .page-content {
      .grid {
        grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));

        .card_item {
          flex-direction: column;
          background-color: transparent;
          border-color: color-mix(in oklab, var(--border) 10%, transparent);

          .card_item_icon {
            width: auto;
            height: auto;
            align-self: flex-start;
            background-color: transparent;
            margin-bottom: 0.875rem;

            & > svg {
              width: 2.25rem;
              height: 2.25rem;
            }
          }

          .card_item_content {
            .card_item_title {
              font-size: 1.125rem;
              line-height: 1.375;
              color: var(--primary-foreground);

              @media (width >= 64rem) {
                font-size: 1.375rem;
                line-height: calc(1.75 / 1.375);
              }
            }
          }
        }
      }
    }
  }

  .page-banner + &.section,
  &.section + &.section {
    padding-block: 1.5rem !important;

    &:first-child {
      padding-top: 3rem !important;
    }

    &:last-child {
      padding-bottom: 3rem !important;
    }

    @media (width >= 62rem) {
      padding-block: 2.5rem !important;

      &:first-child {
        padding-top: 3rem !important;
      }

      &:last-child {
        padding-bottom: 5rem !important;
      }
    }
  }

  &.section {
    .page-header {
      .page-header-description {
        p:first-child {
          font-weight: 500;
        }
      }
    }
  }
}

.wrapper {
  position: relative;
}

.section__title {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: calc(2 / 1.5);
  margin-bottom: 1.5rem;

  @media (width >= 48rem) {
    font-size: 1.875rem;
    line-height: calc(2.25 / 1.875);
    margin-bottom: 3rem;
  }

  @media (width >= 62rem) {
    font-size: 2.25rem;
    line-height: calc(2.5 / 2.25);
  }
}

.page-header {
  border-color: color-mix(in oklab, var(--border) 50%, transparent);

  .container-wrapper {
    width: 100%;
    margin-inline: auto;

    @media (width >= 1600px) {
      &:is(.layout-fixed *) {
        max-width: 98rem;
      }
    }

    & > div {
      display: flex;
      flex-direction: column;

      &.center {
        align-items: center;

        .page-header-heading {
          text-align: center;
          text-wrap: pretty;
        }

        .page-header-description {
          text-align: center;
          text-wrap: balance;

          &:has(> p:only-child) > p {
            font-weight: 400;
            font-size: 1rem;
            line-height: 1.5;
            color: var(--foreground);

            @media (width >= 40rem) {
              font-size: 1.125rem;
              line-height: calc(1.75 / 1.125);
            }
          }
        }
      }
    }
  }

  .page-header-container {
    width: 100%;
    container-type: inline-size;
    container-name: page-header-container;
    display: grid;
    grid-auto-rows: min-content;
    align-items: flex-start;
    gap: 0.25rem;

    &:has(*.page-header-actions) {
      grid-template-rows: auto auto;
      @media (width >= 48rem) {
        grid-template-columns: 1fr auto;
      }
    }
    &:has(*.page-header-description) {
      grid-template-rows: auto auto;
    }
  }

  .page-header-heading {
    max-width: 48rem;
    font-weight: 500;
    font-size: 1.75rem;
    line-height: calc(2 / 1.5);

    & + .page-header-description {
      margin-top: 2.75rem;

      @media (width >= 40rem) {
        margin-top: 3.5rem;
      }
    }

    @media (width >= 36rem) {
      font-size: 2rem;
      line-height: calc(2.25 / 1.875);
    }

    @media (width >= 48rem) {
      font-size: 2.25rem;
      line-height: calc(2.5 / 2.25);
    }
  }

  .page-header-description {
    max-width: 48rem;
    margin-inline: auto;
    color: var(--muted-foreground);

    & + .page-header-heading {
      margin-top: 1.125rem;

      @media (width >= 40rem) {
        margin-top: 1.5rem;
      }
    }

    & + .page-header-actions {
      margin-top: 2.75rem;

      @media (width >= 40rem) {
        margin-top: 3.5rem;
      }
    }

    :where(& > :not(:last-child)) {
      margin-block-end: 1.25rem;
    }

    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        margin-block-end: 1.5rem;
      }
    }

    & > p {
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.5;

      &:first-child {
        font-weight: 600;
        font-size: 1.125rem;
        line-height: calc(1.75 / 1.125);
        color: var(--foreground);
      }

      @media (width >= 40rem) {
        font-size: 1.125rem;
        line-height: calc(1.75 / 1.125);

        &:first-child {
          font-size: 1.25rem;
          line-height: calc(1.75 / 1.25);
        }
      }

      & > a {
        display: inline-block;
        color: var(--primary);
        text-underline-offset: 4px;

        &:hover {
          @media (hover: hover) {
            color: color-mix(in oklab, var(--primary) 70%, transparent);
            text-decoration: underline;
          }
        }
      }
    }

    & > ul li {
      margin-left: 1rem;
      list-style: disc;
      font-weight: 500;
      font-size: 1rem;
      line-height: 1.5;
      color: var(--foreground);
    }
  }

  .page-header-actions {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    gap: 0.5rem;

    :is(& *) {
      &.button {
        box-shadow: var(--shadow-md);
      }
    }
  }
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.75rem;

  @media (width >= 48rem) {
    margin-top: 4rem;
  }

  .page-media {
    width: 100%;
    padding-bottom: 50.6%;
    position: relative;

    & > picture {
      width: 100%;
      position: absolute;
      inset: 0;

      & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.5rem;

  @media (width>= 60rem) {
    gap: 3rem;
  }

  .column {
    &:has(> picture) {
      overflow: hidden;
      border-radius: var(--radius-xl);
      padding-bottom: 58.6%;
      position: relative;
    }

    & > picture {
      position: absolute;
      inset: 0;

      & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    & > .column-title {
      font-weight: 600;
      font-size: 0.8125rem;
      line-height: calc(1.25 / 0.8125);
      color: var(--primary);
      margin-bottom: 0.5rem;
      text-transform: uppercase;
    }

    & > .column-heading {
      font-weight: 700;
      font-size: 1.5rem;

      @media (width>= 50rem) {
        font-size: 1.875rem;
      }
    }

    & > .column-description {
      display: flex;
      flex-direction: column;
      margin-bottom: 3rem;
      margin-top: 1.75rem;
      gap: 1.5rem;

      & > p {
        font-weight: 500;
        font-size: 1rem;
        line-height: calc(1.375 / 1);
        color: var(--muted-foreground);
      }
    }

    & > .column-actions {
      display: flex;
      gap: 1rem;
    }
  }
}

.stomp_stack_wrapper {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-stop: always;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  @media (width >= 60rem) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    scroll-snap-type: none;
  }

  .stomp-stack {
    flex: 0 0 70%;
    scroll-snap-align: start;
    /* scroll-snap-stop: always; */
    background-color: var(--muted);
    position: relative;

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      opacity: 0.55;
      background: linear-gradient(
        90deg,
        var(--foreground) 0,
        color-mix(in oklab, var(--foreground) 20%, transparent)
      );
      position: absolute;
      z-index: 0;
      left: 0;
      top: 0;
    }

    & > picture {
      width: 100%;
      height: 100%;
      position: absolute;
      /* z-index: -1; */
      left: 0;
      top: 0;

      & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    @media (width>= 36rem) {
      flex: 0 0 60%;
    }

    @media (width>= 48rem) {
      flex: 0 0 44%;
    }

    @media (width>= 50rem) {
      flex: 0 0 36%;
    }

    @media (width>= 60rem) {
      width: auto;
      flex: unset;

      &:first-child {
        grid-column: span 2;
        grid-row: span 2;
      }
    }

    & > a {
      width: 100%;
      display: block;
      aspect-ratio: 1/1;
      position: relative;
      z-index: 2;

      .stack {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding-bottom: 1rem;
        padding-inline: 1rem;
        position: absolute;
        bottom: 0rem;
        left: 0rem;

        .stack-title {
          font-weight: 500;
          font-size: 1.125rem;
          line-height: calc(1.5 / 1.125);
          color: var(--primary-foreground);
        }
        .stack-description {
          font-weight: 400;
          font-size: 0.75rem;
          line-height: calc(1.25 / 0.875);
          color: var(--muted);
        }
      }
    }
  }

  &::-webkit-scrollbar {
    display: none;
  }
}

.anchor-wrapper {
  display: block;
  margin-inline: calc(0 - var(--offset));
  overflow: hidden;
  margin-top: 2.75rem;

  @media (width >= 48rem) {
    margin-top: 4rem;
  }

  .content-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 0.5rem;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-stop: always;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--offset);
    scroll-behavior: smooth;
    position: relative;

    & > .anchor {
      width: auto;
      max-width: max-content;
      padding-block: 0.5rem;
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.5;
      color: var(--muted-foreground);
      flex-shrink: 0;

      &:not(:first-child) {
        color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
        cursor: pointer;
        background: linear-gradient(var(--primary), var(--primary)) right
          bottom / 0% 2px no-repeat;
        transition-property: color, background-size;
        transition-duration: 0.7s, 0.3s;
        transition-timing-function: var(--ease-out-quart);

        &:hover {
          @media (hover: hover) {
            text-decoration-line: none;
            background-size: 100% 2px;
            background-position-x: left;
          }
        }
      }
    }
  }
}

.grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  padding-bottom: 1rem;

  @media (width >= 48rem) {
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (width >= 64rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.grid-row {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.375rem;

  @media (width >= 48rem) {
    flex-direction: row;
    gap: 3rem;
  }

  @media (width >= 62rem) {
    gap: 4rem;
  }

  .grid-row-content-wrap {
    flex: 1;

    .grid-row-title {
      max-width: 26rem;
      font-weight: 600;
      font-size: 0.875rem;
      line-height: calc(1.25 / 0.875);
      text-wrap: balance;
      color: var(--primary);
      text-transform: uppercase;
      margin-bottom: 0.875rem;

      /* @media (width >= 48rem) {
        font-size: 1rem;
        line-height: 1.5;
      } */

      /* @media (width >= 62rem) {
        font-size: 1.125rem;
        line-height: calc(1.5 / 1.125);
      } */
    }

    p:last-child {
      color: var(--foreground);
    }
  }

  .grid-row-image {
    width: min(20rem, 100%);

    & > picture {
      width: 100%;
      height: auto;
      display: block;
      padding-bottom: 130%;
      position: relative;

      & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        inset: 0;
      }
    }
  }
}

.list-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card_item {
  display: flex;
  flex-direction: column;
  transition: all 200ms var(--ease-out-quad);
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;

  &:has(.card_item_icon) {
    flex-direction: row;
    padding-block: 1rem;
  }

  &:has(.card_item_image-wrapper) {
    gap: 1rem;
  }

  &:not(:has(.card_item_icon)),
  &:not(:has(.card_item_image-wrapper)) {
    .card_item_content {
      padding-block: 1rem;
    }
  }

  & > a {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .card_item_icon {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background-color: var(--accent);
    color: var(--accent-foreground);
    border-radius: var(--radius-sm);
    margin-left: 1rem;

    & > svg {
      width: 1.75rem;
      height: 1.75rem;
    }
  }

  .card_item_image-wrapper {
    @media (width >= 64rem) {
      position: relative;
    }

    .card_item_image {
      width: 100%;
      height: 15rem;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;

      & > picture,
      & > .placeholder {
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
      }

      & > .placeholder {
        display: grid;
        place-items: center;
        background-color: color-mix(in oklab, var(--primary) 5%, transparent);

        & > svg {
          width: 5rem;
          height: 5rem;
          color: color-mix(in oklab, var(--primary) 50%, transparent);
        }
      }

      & > picture {
        & > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: opacity 0.3s var(--ease-out-quad);
        }
      }
    }
  }

  .card_item_content {
    padding-inline: 1rem;

    .card_item_title {
      font-weight: 600;
      font-size: 1rem;
      line-height: 1.25;
      color: var(--foreground);
      /* overflow: hidden;
      display: -webkit-box;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical; */

      @media (width >= 64rem) {
        font-size: 1.125rem;
        line-height: 1.375;
      }

      & + .card_item_excerpt {
        margin-block-start: 1rem;
      }

      & + .card_item_wrap,
      & + .card_item_description {
        margin-block-start: 0.5rem;
      }
    }

    .card_item_wrap {
      display: flex;
      align-items: center;
      margin-block-end: 0.5rem;
      gap: 0.5rem;

      & > .card_item_text {
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1.125rem;
        color: var(--muted-foreground);
      }

      & > .card_item_badge {
        font-weight: 500;
        font-size: 0.75rem;
        line-height: 1;
        padding-block: 0.25rem;
        padding-inline: 0.5rem;
        border-radius: var(--radius-full);
        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
        color: var(--primary);
      }
    }

    .card_item_description {
      font-weight: 500;
      font-size: 0.875rem;
      line-height: 1.25rem;
      color: var(--muted-foreground);
    }

    .card_item_excerpt,
    .card_item_date {
      font-size: 0.9375rem;
      line-height: 1.375rem;
      color: var(--muted-foreground);
    }

    .card_item_date {
      font-weight: 400;

      @media (width >= 62rem) {
        font-size: 0.8125rem;
      }
    }

    .card_item_excerpt {
      font-weight: 500;
      overflow: hidden;
      display: -webkit-box;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

      & + .card_item_body {
        margin-block-start: 1.25rem;
      }
    }

    .card_item_date {
      & + .card_item_title {
        margin-block-start: 0.5rem;
      }
    }

    .card_item_body {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;

      & > * {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
        font-size: 0.8125rem;
        color: var(--muted-foreground);
        & > svg {
          width: 1rem;
          height: 1rem;
          color: var(--primary);
        }
      }
    }
  }

  .card_item_footer {
    display: flex;
    align-self: stretch;
    padding-block: 1rem;
    padding-inline-end: 1rem;
    margin-inline-start: auto;
  }

  &:hover {
    @media (hover: hover) {
      box-shadow:
        0px 2px 3px 0px hsl(0 0% 0% / 0.1),
        0px 4px 6px -1px hsl(0 0% 0% / 0.1);
    }
  }
}

.article {
  width: 100%;
  padding-block-end: 3.5rem;

  @media (width >= 72.5rem) {
    padding-block-end: 5rem;
  }

  .article__header {
    display: flex;
    row-gap: 1.25rem;
    flex-direction: column;
    margin-bottom: 3.5rem;
    margin-top: 1.75rem;

    .btn-wrap {
      .button {
        flex-direction: row-reverse;
        border-radius: 0;
        padding-inline: 0;

        &.link {
          background: linear-gradient(var(--primary), var(--primary)) right
            bottom / 0% 1px no-repeat;
          transition-property: color, background-size;
          transition-duration: 0.7s, 0.3s;
          transition-timing-function: var(--ease-out-quart);

          &:not(*:disabled) {
            &:hover {
              @media (hover: hover) {
                text-decoration-line: none;
                background-size: 100% 1px;
                background-position-x: left;
              }
            }
          }
        }
      }
    }

    .article__title {
      width: 100%;
      max-width: 60rem;
      font-weight: 500;
      font-size: 2.125rem;
      line-height: 1.125;
      text-wrap: balance;

      @media (min-width: 36rem) {
        font-size: 3rem;
      }
      @media (width >= 64rem) {
        font-size: 3.25rem;
        line-height: 1.25;
      }
    }

    .article__grid,
    .article__grid-lg {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      padding-top: 1rem;

      @media (width >= 48rem) {
        padding-top: 2rem;
      }

      @media (width >= 64rem) {
        padding-top: 2.75rem;
      }
    }

    .article__grid {
      grid-template-areas: "ArticleDate" "ArticleShare" "ArticleExcerpt";
      grid-template-rows: auto 1fr auto;
      row-gap: 1.125rem;
      column-gap: 2rem;

      @media (width >= 64rem) {
        row-gap: 1.25rem;
        grid-template-columns: 14rem 1fr;
        grid-template-areas:
          "ArticleShare ArticleDate"
          "ArticleShare ArticleExcerpt";
      }

      .article__share {
        grid-area: ArticleShare;

        .button-group {
          border: 1px solid var(--border);

          & > *:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
          & > *:not(:first-child) {
            border-left: 1px solid var(--border);
          }

          & > *:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
          & > [data-slot]:not(:has(~ [data-slot])) {
            border-top-right-radius: var(--radius);
            border-bottom-right-radius: var(--radius);
          }

          @media (width >= 64rem) {
            flex-direction: column;

            & > *:not(:first-child) {
              border-top-left-radius: 0;
              border-top-right-radius: 0;
            }
            & > *:not(:first-child) {
              border-top: 1px solid var(--border);
              border-left-width: 0;
            }
            & > *:not(:last-child) {
              border-bottom-right-radius: 0;
              border-bottom-left-radius: 0;
            }
            & > [data-slot]:not(:has(~ [data-slot])) {
              border-bottom-right-radius: var(--radius);
              border-bottom-left-radius: var(--radius);
            }
          }

          .button {
            background-color: transparent;
            color: var(--foreground);

            & > svg {
              width: 1.25rem;
              height: 1.25rem;
            }

            &:not(*:disabled) {
              &:hover {
                @media (hover: hover) {
                  background-color: var(--secondary);
                  color: var(--secondary-foreground);
                }
              }
            }

            &[data-size="icon-lg"] {
              width: 4rem;
              height: 4rem;
              border-radius: 0;
            }
          }
        }
      }

      .article__date,
      .article__excerpt {
        flex: 1;
      }

      .article__date {
        font-size: 0.9375rem;
        grid-area: ArticleDate;
        color: var(--muted-foreground);
      }
      .article__excerpt {
        grid-area: ArticleExcerpt;
        color: var(--foreground);

        @media (width >= 48rem) {
          max-width: 44rem;
          margin-inline-end: auto;
        }

        :where(& > :not(:last-child)) {
          margin-block-end: 1.125rem;
        }

        @media (width >= 40rem) {
          :where(& > :not(:last-child)) {
            margin-block-end: 1.25rem;
          }
        }

        & > p {
          font-weight: 400;
          font-size: 1rem;
          line-height: 1.5;

          &:not(:last-child) {
            margin-bottom: 0.75rem;
          }

          &:first-child {
            font-weight: 500;
            font-size: 1.125rem;
            line-height: calc(1.75 / 1.125);
            color: var(--foreground);
          }

          @media (width >= 40rem) {
            font-size: 1.125rem;
            line-height: calc(1.75 / 1.125);

            &:first-child {
              font-size: 1.25rem;
              line-height: calc(1.75 / 1.25);
            }
          }

          & > a {
            display: inline-block;
            color: var(--primary);
            padding-bottom: 0.25rem;
            background: linear-gradient(var(--primary), var(--primary)) right
              bottom / 0% 1px no-repeat;
            transition-property: color, background-size;
            transition-duration: 0.7s, 0.3s;
            transition-timing-function: var(--ease-out-quart);

            &:hover {
              @media (hover: hover) {
                color: color-mix(in oklab, var(--primary) 70%, transparent);
                text-decoration-line: none;
                background-size: 100% 1px;
                background-position-x: left;
              }
            }
          }
        }
      }
    }

    .article__grid-lg {
      grid-template-rows: auto 1fr;
      row-gap: 3rem;
      column-gap: 2rem;

      @media (width >= calc(48rem + 1px)) {
        grid-template-columns: 40% 1fr;
      }

      @media (width >= 60rem) {
        column-gap: 4rem;
        grid-template-columns: 24rem 1fr;
      }

      .article__address {
        color: var(--foreground);

        :where(& > :not(:last-child)) {
          margin-block-end: 1.125rem;
        }

        @media (width >= 40rem) {
          :where(& > :not(:last-child)) {
            margin-block-end: 1.25rem;
          }
        }

        & > p {
          font-weight: 500;
          font-size: 1.125rem;
          line-height: calc(1.75 / 1.125);
          color: var(--foreground);

          @media (width >= 40rem) {
            font-size: 1.25rem;
            line-height: calc(1.75 / 1.25);
          }

          & > a {
            display: inline-block;
            color: var(--primary);
            padding-bottom: 0.25rem;
            background: linear-gradient(var(--primary), var(--primary)) right
              bottom / 0% 1px no-repeat;
            transition-property: color, background-size;
            transition-duration: 0.7s, 0.3s;
            transition-timing-function: var(--ease-out-quart);

            &:hover {
              @media (hover: hover) {
                color: color-mix(in oklab, var(--primary) 70%, transparent);
                text-decoration-line: none;
                background-size: 100% 1px;
                background-position-x: left;
              }
            }
          }
        }

        & > .columns {
          display: grid;
          grid-template-columns: repeat(
            auto-fit,
            minmax(min(12rem, 100%), 1fr)
          );
          row-gap: 1rem;
          column-gap: 1.25rem;
          margin-top: 1rem;

          @media (width>=48rem) {
          }

          & > div {
            & > .column-title {
              font-weight: 500;
              font-size: 0.8125rem;
              line-height: calc(1.25 / 0.8125);
              color: color-mix(
                in oklab,
                var(--muted-foreground) 70%,
                transparent
              );
              margin-bottom: 0.5rem;
            }
            & > p {
              font-weight: 400;
              font-size: 0.9375rem;
              line-height: calc(1.25 / 0.9375);

              @media (width>=calc(48rem + 1px)) {
                font-size: 1rem;
                line-height: 1.25;
              }

              &:not(:last-child) {
                margin-bottom: 0.75rem;
              }

              & > a {
                display: inline-block;
                padding-bottom: 0.25rem;
                background: linear-gradient(var(--primary), var(--primary))
                  right bottom / 0% 1px no-repeat;
                transition-property: color, background-size;
                transition-duration: 0.7s, 0.3s;
                transition-timing-function: var(--ease-out-quart);

                &:hover {
                  @media (hover: hover) {
                    color: color-mix(in oklab, var(--primary) 70%, transparent);
                    text-decoration-line: none;
                    background-size: 100% 1px;
                    background-position-x: left;
                  }
                }
              }
              &:not(:last-child) {
                margin-bottom: 0.25rem;
              }
            }

            .social-links {
              display: flex;
              flex-wrap: wrap;
              padding-top: 1rem;
              gap: 0.75rem;

              .button {
                border-radius: var(--radius-full);
              }
            }
          }
        }
      }
      .article__form {
        width: 100%;
        padding: var(--offset);
        background-color: var(--muted);
        border-radius: var(--radius-2xl);
      }
    }
  }

  .article__hero {
    width: 100%;
    padding-bottom: 100%;
    position: relative;

    &:has(iframe) {
      padding-bottom: 56.86%;
    }

    & > picture,
    & > iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      left: 0;
      top: 0;
    }

    & > iframe {
      border: none;
      outline: none;
    }

    & > picture {
      & > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .article__content {
    width: 100%;
    max-width: 50rem;
    margin-inline: auto;
    padding-block-start: 3.5rem;

    @media (width >= 72.5rem) {
      padding-block-start: 5rem;
    }

    .prose {
      p {
        font-weight: 400;
        font-size: 1.125rem;
        line-height: 1.25;

        @media (width >= 64rem) {
          font-size: 1.25rem;
        }

        &:not(:last-child) {
          margin-bottom: 1.5rem;
        }
      }
    }
  }

  .article_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    padding-bottom: 3.5rem;

    @media (width >= 72.5rem) {
      padding-bottom: 5rem;
    }

    .article_grid_photo {
      cursor: pointer;
      overflow: hidden;
      padding-bottom: 78%;
      position: relative;

      & > picture {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;

        & > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}

.prd-wrapper {
  padding-block-start: 3.5rem;
  padding-block-end: 5rem;

  @media (width >=62rem) {
    padding-block-start: 2.5rem;
    padding-block-end: 3rem;
  }

  .stomp_stack_wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    scroll-snap-type: none;
    overflow: visible;
    gap: 1rem;

    .stomp-stack {
      width: auto;
      flex: unset;

      @media (width>= 60rem) {
        &:first-child {
          grid-column: span 1;
          grid-row: span 1;
        }
      }
    }
  }
}

.prd__info {
  font-size: 0.875rem;
  line-height: 1.25rem;
  position: relative;
  @media (width <= 63.9375rem) {
    display: flex;
    flex-direction: column;
  }

  .button.prd__back {
    margin-top: 0.875rem;
    padding-left: 2.125rem;
    font-size: 0.875rem;
    position: absolute;
    z-index: 4;
    left: var(--offset);
    top: 0;

    &.link {
      color: var(--muted-foreground);
      &:not(*:disabled) {
        &:hover {
          @media (hover: hover) {
            text-decoration-line: none;
          }
        }
      }

      &:after,
      &:before {
        content: "";
        transform: translateY(-50%);
        position: absolute;
        top: 50%;
      }
      &:before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 3.5px 6px;
        border-color: transparent var(--muted-foreground) transparent
          transparent;
        left: 2px;
      }
      &:after {
        width: 1rem;
        height: 1px;
        background-color: var(--muted-foreground);
        left: 0.625rem;
      }
    }
  }

  .prd__info__wrapper {
    @media (width >= 64rem) {
      display: flex;
    }

    .prd-gallery {
      min-height: 500px;
      @media (width >= 64rem) {
        flex: 0 0 50%;
      }
    }
    .prd-details {
      padding: 1.5rem;
      position: relative;
      @media (width >= 64rem) {
        width: 50%;
        min-height: calc(100vh - 2.5rem);
        display: flex;
        align-self: flex-end;
        justify-content: center;
        padding: 0rem;
        transform: none;
        position: sticky;
        bottom: 0px;
        left: 0px;
      }

      .prd-details-wrap {
        display: flex;
        flex-direction: column;

        @media (width >= 64rem) {
          width: 100%;
          max-width: 28rem;
          align-self: center;
          padding-block: 8.75rem;
          position: relative;
        }

        .prd__header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.5rem;

          @media (width >= 64rem) {
            margin-top: 0.5rem;
          }

          .prd__name {
            font-size: 1.125rem;
            line-height: 1.375rem;
            margin-right: 1.25;

            @media (width >= 64rem) {
              font-size: 1.5rem;
              line-height: 1.75rem;
            }
          }
        }

        .prd__content {
          margin-top: 0.625rem;
        }
        .button.prd__add {
          border-radius: 0;
        }
      }
    }
  }
}

.tabs-container {
  width: 100%;

  .tab-list {
    width: fit-content;
    display: flex;
    align-items: center;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    background-color: var(--muted);
    -ms-overflow-style: none;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    .tab {
      border: none;
      outline: none;
      flex-shrink: 0;
      background-color: transparent;
      font-weight: 600;
      font-size: 0.875rem;
      line-height: 1;
      padding-block: 0.625rem;
      padding-inline: 1rem;
      border-radius: var(--radius-sm);
      color: var(--muted-foreground);
      transition-property: color, background-color;
      transition-timing-function: var(--ease-out-quad);
      transition-duration: 200ms;
      white-space: nowrap;
      cursor: pointer;
      position: relative;

      &:hover {
        color: currentColor;
      }

      &.is-active,
      &[aria-selected="true"] {
        background-color: var(--background);
        color: var(--foreground);
        &::after {
          display: block;
        }
      }

      &:focus-visible {
        outline: none;
      }
    }
  }

  .tabs-panels {
    display: flex;
    overflow: hidden;
    padding-top: 1.125rem;

    .tab-panel {
      opacity: 1;
      width: 100%;
      min-height: 5rem;
      display: none;
      flex: 1 0 auto;
      animation: tabFadeIn 0.3s var(--ease-out-quad);

      &:not([aria-hidden="true"]) {
        display: block;
      }

      & > p {
        color: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
      }
    }
  }
}

.js-toast {
  opacity: 0;
  visibility: hidden;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--muted-foreground);
  transform: translateX(-50%) translateY(-1rem);
  transition-property: opacity, transform, visibility;
  transition-timing-function: var(--cubic-bezier);
  transition-duration: 0.25s;
  pointer-events: none;
  white-space: nowrap;
  position: absolute;
  z-index: 9999;
  top: calc(100% + 0.5rem);
  left: 50%;

  &.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

.faq {
  display: grid;
  gap: 0.5rem;
}

.faq-item {
  overflow: clip;
  border: 1px solid var(--border);
  background-color: var(--background);
  transition-property: background-color, border-color;
  transition-timing-function: var(--ease-out-quad);
  transition-duration: 200ms;
}

.faq-item.is-active {
  background-color: color-mix(in oklab, var(--muted) 20%, transparent);
  border-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  inline-size: 100%;
  padding: 1rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
}

.faq-question:focus-visible {
  outline: none;
}

.faq-icon {
  flex-shrink: 0;
  inline-size: 0.8125rem;
  block-size: 0.8125rem;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
  transform: translate(-50%, -50%);
  transition: transform 200ms var(--ease-out-quad);
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
}

.faq-icon::before {
  inline-size: 100%;
  block-size: 2px;
}

.faq-icon::after {
  inline-size: 2px;
  block-size: 100%;
}

.faq-item.is-active .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  opacity: 0;
  transition-property: grid-template-rows, opacity, visibility;
  transition-timing-function: var(--ease-out-quad);
  transition-duration: 200ms;
}

.faq-answer:not([hidden]) {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
}

.faq-answer-content {
  overflow: hidden;
}

.faq-answer-content > * {
  margin: 0;
}

.faq-answer-content > :not(:last-child) {
  margin-block-end: 1rem;
}

.faq-answer-content :is(ul, ol) {
  padding-inline-start: 1.25rem;
}

.faq-answer-content p + :is(ul, ol) {
  margin-block-start: 1rem;
}

.faq-answer-content li:not(:last-child) {
  margin-block-end: 0.5rem;
}

.faq-answer-content {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  overflow: hidden;
}

.faq-answer-inner {
  padding-inline: 1rem;
  padding-block-end: 1rem;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;

  @media (width>=48rem) {
    gap: 2rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 3px;
    top: 0;
    width: 2px;
    background: var(--border);
    transform: translateY(3px);

    @media (width>=48rem) {
      width: unset;
      height: 2px;
      bottom: unset;
      right: 0;
      left: 0;
    }
  }

  .timeline-item {
    position: relative;
    padding-left: 1.5rem;

    @media (width>=48rem) {
      padding-left: 0;
      flex: 1;
      text-align: center;
    }

    .timeline-year-wrapper {
      @media (width>=48rem) {
        position: relative;
        display: inline-block;
      }

      .timeline-year {
        appearance: none;
        border: none;
        background: none;
        padding: 0;
        margin-bottom: 0.125rem;
        font-size: 1rem;
        line-height: 1.5;
        font-weight: 700;
        color: var(--primary);
        cursor: pointer;

        @media (width>= 48rem) {
          margin-bottom: 0;
          padding-top: 1rem;

          &:hover + .timeline-tooltip,
          &:focus-visible + .timeline-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
          }
        }

        &::before {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          top: 0.5rem;
          width: 0.5rem;
          height: 0.5rem;
          border-radius: var(--radius-full);
          background: var(--primary);

          @media (width>= 48rem) {
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
          }
        }
      }

      .timeline-tooltip {
        @media (width>=48rem) {
          position: absolute;
          left: 50%;
          bottom: calc(100% + 1rem);
          width: min(var(--tooltip-width), 90vw);
          padding: 1rem;
          border: 1px solid var(--border);
          border-radius: var(--radius-md);
          background: var(--background);
          text-align: left;
          opacity: 0;
          visibility: hidden;
          transform: translateX(-50%) translateY(0.5rem);
          transition-property: opacity, transform, visibility;
          transition-timing-function: var(--ease-out-quad);
          transition-duration: 200ms;
          box-shadow:
            0 10px 15px -3px rgb(0 0 0 / 0.1),
            0 4px 6px -4px rgb(0 0 0 / 0.1);
          z-index: 10;

          &::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -0.375rem;
            width: 0.75rem;
            height: 0.75rem;
            background: var(--background);
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            transform: translateX(-50%) rotate(45deg);
          }
        }
        h3 {
          font-weight: 600;
          font-size: 1rem;
          line-height: 1.5;
          margin-bottom: 0.5rem;
        }

        p {
          font-size: 0.8125rem;
          line-height: 1.25;
        }
      }
    }
  }
}

.message-stack {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  gap: 0.5rem;

  & > .message {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: calc(1.25 / 0.875);

    &.success {
      color: var(--accent-foreground);
    }
    &.error {
      color: var(--destructive);
    }
    &.warning {
      color: var(--warning);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-fade-out 150ms var(--ease-out-quart);
  }
  ::view-transition-new(root) {
    animation: vt-fade-in 250ms var(--ease-in-quart);
  }

  /* ::view-transition-group(*) {
    animation-duration: 350ms;
    animation-timing-function: var(--ease-out-quad);
    z-index: 0;
  } */
}

.site-footer {
  background-color: var(--foreground);
  padding-top: 3.5rem;
  padding-bottom: 1.25rem;

  .footer-top {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    @media (width >= 64rem) {
      flex-direction: row;
    }

    .brand {
      width: 100%;
      max-width: 24rem;

      & > div {
        width: auto;
        height: 7rem;
        display: inline-flex;
        padding: 0.75rem;
        border-radius: var(--radius-md);

        background-color: var(--background);
        @media (width >= 64rem) {
          height: 7.5rem;
        }

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .footer-nav-tabs {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 0rem;

      @media (width >= 64rem) {
        gap: 1.25rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 3rem;
      }

      .footer-nav-tab {
        flex: 1;

        &:not(:first-child) {
          border-top: 1px solid
            color-mix(in oklab, var(--border) 10%, transparent);
          @media (width >= 64rem) {
            border-top-width: 0;
          }
        }
        [class*="footer-nav-title"] {
          width: 100%;
          justify-content: space-between;
          padding-block: 1.375rem;
          font-size: 0.9375rem;

          @media (width >= 64rem) {
            padding-block: 0.75rem;
          }
        }

        .footer-nav-title {
          display: none;

          @media (width >= 64rem) {
            display: block;
            color: color-mix(in oklab, var(--muted) 80%, transparent);
          }
        }

        .footer-nav-title-mobile {
          display: flex;
          align-items: flex-start;
          color: var(--primary-foreground);

          @media (width >= 64rem) {
            display: none;
          }

          & > svg {
            width: 1.375rem;
            height: 1.375rem;
            transition: transform 0.3s var(--ease-in-quart);
            color: color-mix(in oklab, var(--muted) 60%, transparent);
          }

          &.is-active {
            color: color-mix(in oklab, var(--muted) 60%, transparent);

            & > svg {
              transform: rotate(90deg);
            }
          }
        }

        .footer-nav-panel {
          height: 0;
          display: grid;
          overflow: hidden;
          line-height: normal;
          font-size: 0.9375rem;
          transition:
            height 0.3s var(--ease-out-quart),
            visibility 0s linear;
          visibility: hidden;

          @media (width >= 64rem) {
            height: auto;
            overflow: visible;
            visibility: visible;
          }

          &.is-active {
            height: auto;
            visibility: visible;
          }

          li {
            padding-top: 0.125rem;
            padding-bottom: 0.5rem;

            &.social-link {
              display: flex;
              padding-top: 1rem;
              gap: 0.75rem;

              .button {
                border-radius: var(--radius-full);
              }
            }

            &:last-child {
              padding-bottom: 2rem;
            }
            @media (width >= 64rem) {
              &:last-child {
                padding-bottom: 0.5rem;
              }
            }
            .footer-link {
              display: inline-block;
              color: var(--primary-foreground);

              @media (width >= 64rem) {
                transition: color 0.3s var(--ease-out-quart);
              }

              &:hover {
                color: color-mix(in oklab, var(--primary) 80%, transparent);
              }
            }
          }
        }
      }
    }
  }

  .footer-bottom {
    display: block;
    border-top: 1px solid color-mix(in oklab, var(--border) 10%, transparent);

    .footer-bottom-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      color: color-mix(in oklab, var(--muted) 80%, transparent);
      padding-top: 1.25rem;
      font-size: 0.8125rem;
      gap: 1rem;

      @media (width >= 48rem) {
        justify-content: space-between;
        flex-flow: row-reverse;
      }

      & > p {
        & > span {
          color: var(--primary);
        }
      }
    }
  }
}

/* 11. Empty state
    ---------------------------------------------------------- */
.empty-state {
  color: var(--muted);
  text-align: center;
  padding-block: 3rem;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}