.health-benefits-anatomical {
  padding: var(--PT) 0px var(--PB);

  .health-benefits-anatomical__container {
    --header-gap: 2.5rem;

    --title-size: 4.6rem;
    --title-weight: 400;
    --title-height: 1.35;
    --content-size: 2rem;
    --content-weight: 300;
    --content-height: 1.4;
    --item-title-size: 2.4rem;
    --item-title-weight: 400;
    --item-title-height: 1.25;
    --item-link-size: 1.6rem;
    --item-link-weight: 700;
    --item-link-height: 1;

    display: grid;
    gap: 3rem;

    .health-benefits-anatomical__header {
      display: grid;
      gap: var(--header-gap);
      text-align: center;

      .health-benefits-anatomical__heading {
        font-size: var(--title-size);
        font-weight: var(--title-weight);
        line-height: var(--title-height);
      }

      .health-benefits-anatomical__content {
        font-size: var(--content-size);
        font-weight: var(--content-weight);
        line-height: var(--content-height);
      }
    }

    .health-benefits-anatomical__diagram-wrapper {
      position: relative;

      .health-benefits-anatomical-items {
        height: 100%;
        position: absolute;
        width: 100%;
        z-index: 2;

        .health-benefits-anatomical-item {
          --size: 10rem;
          --icon-bg: #fff;
          --icon-color: var(--color);

          align-items: center;
          color: inherit;
          display: grid;
          gap: var(--item-gap, 2.5rem);
          grid-template-columns: var(--item-items, var(--size) 1fr);
          left: calc(50% + var(--X, 44rem));
          max-width: 33rem;
          position: absolute;
          top: calc(50% + var(--Y, 0rem));
          text-align: var(--item-align, left);
          text-decoration: none;
          translate: -50% -50%;
          width: 100%;

          &:hover {
            --icon-bg: var(--main-color);
            --icon-color: #fff;
            --link-opacity: 1;
          }

          &:nth-child(1) {
            --X: 35.5rem;
            --Y: -23.25rem;
          }

          &:nth-child(2) {
            --X: 44rem;
            --Y: 0rem;
          }

          &:nth-child(3) {
            --X: 35.5rem;
            --Y: 23.25rem;
          }

          &:nth-child(4) {
            --X: -35.5rem;
            --Y: 23.25rem;
          }

          &:nth-child(5) {
            --X: -44rem;
            --Y: 0rem;
          }

          &:nth-child(6) {
            --X: -35.5rem;
            --Y: -23.25rem;
          }

          &:nth-child(3)~* {
            --item-items: 1fr var(--size);
            --icon-order: 2;
            --item-align: right;
            --item-justify: end;
          }

          .health-benefits-anatomical-item-icon {
            align-items: center;
            background-color: var(--icon-bg);
            border: 1px solid currentColor;
            border-radius: 50%;
            color: var(--icon-color);
            display: flex;
            justify-content: center;
            height: var(--size);
            order: var(--icon-order, 0);
            width: var(--size);

            svg {
              height: auto;
              width: 55%;
            }
          }

          .health-benefits-anatomical-item-context {
            display: grid;
            flex: 1 0 auto;
            gap: 1.2rem;

            .health-benefits-anatomical-item-title {
              font-size: var(--item-title-size);
              font-weight: var(--item-title-weight);
              line-height: var(--item-title-height);
            }

            .health-benefits-anatomical-item-link {
              align-items: center;
              display: flex;
              color: var(--main-color, inherit);
              font-size: var(--item-link-size);
              font-weight: var(--item-link-weight);
              gap: .66em;
              justify-content: var(--item-justify, start);
              line-height: var(--item-link-height);
              opacity: var(--link-opacity, 0);
              text-decoration: none;
              transition: 0.3s all;
            }
          }
        }
      }

      .health-benefits-anatomical-diagram {
        --size: 68.5rem;
        align-items: center;
        display: grid;
        height: var(--size);
        justify-content: center;
        margin: 0 auto;
        position: relative;
        width: var(--size);

        &::after,
        &::before {
          content: "";
          left: 50%;
          position: absolute;
          top: 50%;
          translate: -50% -50%;
        }

        &::after {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='684' height='684' viewBox='0 0 684 684' fill='none'%3E%3Ccircle cx='342' cy='342' r='341' stroke='currentColor' stroke-opacity='0.4' stroke-width='2' stroke-linecap='round' stroke-dasharray='2 8'/%3E%3C/svg%3E");
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          height: 100%;
          width: 100%;
        }

        &::before {
          border: 0.2rem solid currentColor;
          border-radius: 50%;
          height: 90%;
          width: 90%;
        }

        svg {
          position: relative;
          top: 4.5%;
        }
      }

      &:not(:has(.health-benefits-anatomical-item:hover)) .anatomical-item.active {
        opacity: 1;
      }

      &:not(:has(.health-benefits-anatomical-item:hover)) .health-benefits-anatomical-item.active {
        --icon-bg: var(--main-color);
        --icon-color: #fff;
        --link-opacity: 1;
      }

      .anatomical-item {
        opacity: 0;
      }

      &:has(.health-benefits-anatomical-item:nth-child(1):hover) .anatomical-item:nth-child(1),
      &:has(.health-benefits-anatomical-item:nth-child(2):hover) .anatomical-item:nth-child(2),
      &:has(.health-benefits-anatomical-item:nth-child(3):hover) .anatomical-item:nth-child(3),
      &:has(.health-benefits-anatomical-item:nth-child(4):hover) .anatomical-item:nth-child(4),
      &:has(.health-benefits-anatomical-item:nth-child(5):hover) .anatomical-item:nth-child(5),
      &:has(.health-benefits-anatomical-item:nth-child(6):hover) .anatomical-item:nth-child(6) {
        opacity: 1
      }
    }
  }

  @media (width < 1100px) {
    .health-benefits-anatomical__container {
      --item-title-size: 1.8rem;
      --item-title-height: 1.33;

      .health-benefits-anatomical__diagram-wrapper {
        .health-benefits-anatomical-items {
          display: grid;
          gap: 2.5rem;
          grid-template-columns: repeat(2, 1fr);
          position: static;

          .health-benefits-anatomical-item {
            --size: 4.8rem;
            max-width: 100%;
            position: static;
            translate: 0;

            &:nth-child(3)~* {
              --item-items: var(--size) 1fr;
              --icon-order: 0;
              --item-align: left;
              --item-justify: start;
            }

            .health-benefits-anatomical-item-context .health-benefits-anatomical-item-link {
              display: none;
            }
          }
        }

        .health-benefits-anatomical-diagram {
          display: none;
        }
      }
    }
  }

  @media (width < 1100px) {
    .health-benefits-anatomical__container {
      --title-size: 3.2rem;
      --title-height: 1.3;

      .health-benefits-anatomical__diagram-wrapper .health-benefits-anatomical-items {
        grid-template-columns: 100%;
      }
    }
  }
}