.section--product-expectation {
  --product-expectation-card-align: left;
  --product-expectation-card-gap: 1rem;
  --product-expectation-card-pad-x: 2rem;
  --product-expectation-card-pad-y: 2rem;
  --product-expectation-card-bg: #F4F2ED;
  --product-expectation-card-border-width: 0.1rem;
  --product-expectation-card-border-radius: 0rem;
  --product-expectation-heading: var(--font-heading-3-size);
  --product-expectation-text: 1.1rem;
  --content-transition-duration: 1s;
  --content-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --product-expectation-progress-label: 1.4rem;

  @media screen and (width >=990px) {
    --product-expectation-card-align: center;
    --product-expectation-card-pad-x: 2rem;
    --product-expectation-card-pad-y: 2rem;
    --product-expectation-card-border-radius: 2rem;
    --product-expectation-text: 1.8rem;
  }

  @media screen and (width >=1440px) {
    --product-expectation-card-gap: 2rem;
    --product-expectation-card-pad-x: 3rem;
    --product-expectation-card-pad-y: 3rem;
    --product-expectation-text: 2.2rem;
  }

  .product-expectation__title {
    .title {
      font-weight: var(--font-weight-500);
    }
  }

  .product-expectation__box {
    display: block;
    container-name: product-expectation;
    container-type: inline-size;
  }

  .grid__item-inner,
  .expectation-card,
  .expectation-card--box,
  .expectation-card-wrapper {
    height: 100%;
  }

  .expectation-card {
    --expectation-card-color: rgb(var(--color-heading-strong));
    --expectation-card-background-color: rgb(var(--color-secondary-button-text));

    padding-block: var(--product-expectation-card-pad-y);
    padding-inline: var(--product-expectation-card-pad-x);
    color: var(--expectation-card-color);
    background-color: var(--expectation-card-background-color);
    border: var(--product-expectation-card-border-width) solid rgb(var(--color-border));
    border-radius: var(--product-expectation-card-border-radius);
    -webkit-border-radius: var(--product-expectation-card-border-radius);
    -moz-border-radius: var(--product-expectation-card-border-radius);
    -ms-border-radius: var(--product-expectation-card-border-radius);
    -o-border-radius: var(--product-expectation-card-border-radius);
    transition-duration: var(--content-transition-duration);
    -webkit-transition-duration: var(--content-transition-duration);
    transition-timing-function: var(--content-transition-timing-function);
    -webkit-transition-timing-function: var(--content-transition-timing-function);

    & *,
    &>* {
      color: inherit;
    }

    &>* {
      margin-bottom: 0;
    }

    &>*:first-child {
      margin-top: 0;
    }

    &>*+* {
      margin-top: var(--product-expectation-card-gap);
    }
  }

  .expectation-card:hover,
  .expectation-card:where(.active-box) {
    --expectation-card-color: rgb(var(--color-foreground));
    --expectation-card-background-color: rgb(var(--product-expectation-card-bg));
  }

  .product-expectation__box:hover .expectation-card:where(.active-box):not(:hover) {
    --expectation-card-color: rgb(var(--color-heading-strong));
    --expectation-card-background-color: rgb(var(--color-secondary-button-text));
  }

  .expectation-card--heading {
    font-size: var(--product-expectation-heading);
    font-weight: var(--font-weight-600);

    @media screen and (width > 990px) and (width <= 1900px) {
      --product-expectation-heading: 28px;
    }

    @media screen and (width > 1900px) {
      --product-expectation-heading: 30px;
    }
  }

  .expectation-card--text {
    font-size: var(--product-expectation-text);

    @media screen and (width > 990px) and (width <= 1900px) {
      --product-expectation-text: 17px;
    }

    @media screen and (width > 1900px) {
      --product-expectation-text: 19px;
    }
  }

  .product-expectation--desktop {
    --product-expectation-progress-space-y-end: 4rem;
    --product-expectation-progress-bullet: 1rem;
    --product-expectation-progress-bullet-position: 1rem;
    --product-expectation-progress-color: rgb(var(--color-heading-strong));
    --product-expectation-progress-height: 0.3rem;

    .grid__item-inner {
      position: relative;
      isolation: isolate;
      padding-top: calc(var(--product-expectation-progress-label) + var(--product-expectation-progress-space-y-end));
    }

    .product-expectation-card {
      --product-expectation-color: rgb(var(--color-input-text));

      &.active {
        --product-expectation-color: rgb(var(--color-foreground));
      }
    }

    .product-expectation-progress--track {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
    }

    .expectation-card--label {
      font-size: var(--product-expectation-progress-label);
      font-weight: var(--font-weight-600);
      color: var(--product-expectation-progress-color);
    }

    .product-expectation-progress--track {
      container-name: product-expectation-track;
      container-type: inline-size;
      text-align: var(--product-expectation-card-align);
      padding-bottom: var(--product-expectation-progress-space-y-end);
      line-height: 1;

      .expectation-card--dot {
        position: absolute;
        left: calc(50% - (var(--product-expectation-progress-bullet) / 2));
        bottom: calc((var(--product-expectation-progress-bullet-position) * 2) - (var(--product-expectation-progress-bullet) / 2));
        width: var(--product-expectation-progress-bullet);
        height: var(--product-expectation-progress-bullet);
        background-color: var(--product-expectation-color);
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        transition: background-color 50ms var(--content-transition-timing-function);
        -webkit-transition: background-color 50ms var(--content-transition-timing-function);
        -moz-transition: background-color 50ms var(--content-transition-timing-function);
        -ms-transition: background-color 50ms var(--content-transition-timing-function);
        -o-transition: background-color 50ms var(--content-transition-timing-function);
      }

      .expectation-card--track {
        position: absolute;
        right: calc(50% - (var(--product-expectation-progress-bullet) / 2));
        bottom: calc((var(--product-expectation-progress-bullet-position) * 2) - (var(--product-expectation-progress-height) / 2));
        background-color: rgb(var(--color-input-text));
        height: var(--product-expectation-progress-height);
        /* width: calc(100cqw + (var(--grid-desktop-horizontal-spacing) * (var(--product-expectation-progress-count) - 1) / var(--product-expectation-progress-count)) + var(--product-expectation-progress-bullet) + (var(--product-expectation-progress-bullet) / 2)); */
        width: calc(100cqw + var(--grid-desktop-horizontal-spacing));
      }

      .expectation-card-track-progress {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(var(--color-foreground));
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.5s ease;
        -webkit-transition: opacity 0.5s ease;
        -moz-transition: opacity 0.5s ease;
        -ms-transition: opacity 0.5s ease;
        -o-transition: opacity 0.5s ease;
      }
    }

    .product-expectation-card.active {
      /* .expectation-card--dot {
        transition-delay: var(--content-transition-duration);
      } */

      .expectation-card-track-progress {
        opacity: 1;
        visibility: visible;
      }
    }

    .product-expectation--grid>.grid__item:first-child .product-expectation-progress--track {
      .expectation-card--track {
        width: 0;
      }
    }
  }

  .product-expectation--mobile {
    --expectation-card-pad-y-start: 0.3rem;
    --expectation-card-pad-y-end: 5rem;
    --expectation-card-track-width: 0.2rem;
    --expectation-card-track-dot-size: 1rem;
    --expectation-card-track-color: rgb(var(--color-foreground));
    --expectation-card-inactive-track-color: rgb(var(--color-input-text));

    .expectation-card-wrapper {
      position: relative;
      isolation: isolate;
      padding-top: var(--expectation-card-pad-y-start);
      padding-bottom: var(--expectation-card-pad-y-end);

      &:where(.active),
      &:has(.scroll-progress-active) {
        .expectation-card {
          color: var(--expectation-card-track-color);
        }
      }

      .expectation-card--track {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(50% - (var(--expectation-card-track-width) / 2));
        width: var(--expectation-card-track-dot-size);
        height: 100%;
        z-index: -1;
      }

      .expectation-card-track-progress {
        position: absolute;
        top: 0;
        left: calc(50% - (var(--expectation-card-track-width) / 2));
        background-color: var(--expectation-card-inactive-track-color);
        width: var(--expectation-card-track-width);
        height: 100%;
      }

      .expectation-card--dot {
        position: absolute;
        bottom: 0;
        left: calc(50% - (var(--expectation-card-track-dot-size) / 2));
        background-color: var(--expectation-card-inactive-track-color);
        width: var(--expectation-card-track-dot-size);
        height: var(--expectation-card-track-dot-size);
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
      }

      .expectation-card--track-progress {
        clip-path: inset(0% 0% 100% 0%);

        .expectation-card--dot,
        .expectation-card-track-progress {
          background-color: var(--expectation-card-track-color);
        }
      }

      .expectation-card--label {
        padding-bottom: 0.5rem;
        font-size: var(--product-expectation-progress-label);
        font-weight: var(--font-weight-600);
      }

      .expectation-card {
        height: auto;
        transition-duration: var(--content-transition-duration);
        transition-timing-function: var(--content-transition-timing-function);
      }
    }
  }
  .bottom-content > p {
    font-size: var(--font-size);
    margin: 0;
    margin-top: 5rem;
    color: var(--bottom-content-color);
}
@media screen and (max-width: 749px){
  .bottom-content > p {
    margin-top: 2rem;
}
}
}