#using-python {
  --sub-why-badge-bg: #ffffff;
  --sub-why-badge-color: var(--primary-main);

  --primitive-primary-main-rgb: 64, 82, 199;
  --primitive-primary-sub-rgb: 93, 152, 254;

  --primary-main-rgb: var(--primitive-primary-main-rgb);

  --primary-sub-rgb: var(--primitive-primary-sub-rgb);

  --primary-gradient: linear-gradient(
    135deg,
    rgb(var(--primary-main-rgb)),
    rgb(var(--primary-sub-rgb))
  );
  --sub-key-point-bg: rgba(255, 255, 255, 0.04);
  --sub-key-point-border: 1px solid rgba(255, 255, 255, 0.15);
  --sub-key-point-shadow: none;
  --sub-key-point-check-item-bg: rgba(255, 255, 255, 0.04);
  --sub-key-point-check-item-border: none;
  --sub-info-heading-color: var(--clr-text-title-invert);
  --sub-info-content-margin-top: 3.2rem;
  --sub-info-wrap-max-width: 68rem;
  --sub-info-wrap-width: 100%;
  --sub-info-wrap-margin: 0 auto;
  --sub-info-wrap-padding: 2.4rem;
  --sub-info-wrap-radius: 1.6rem;
  --sub-info-panel-bg: transparent;
  --sub-info-panel-blur: blur(16px);
  --sub-info-panel-webkit-blur: var(--sub-info-panel-blur);
  --sub-info-panel-border: transparent;
  --sub-info-item-columns: 2fr 10fr;
  --sub-info-item-align: center;
  --sub-info-item-gap: var(--gutter-sm);
  --sub-info-item-padding: 2rem 0;

  --primary-main: rgb(var(--primary-main-rgb));
  --primary-sub: rgb(var(--primary-sub-rgb));

  .no-sub-hero {
    background: url(../../images/sub/using-python/bg/hero_bg.png) no-repeat
      center center / cover;
  }

  .no-sub-why {
    background: url(../../images/sub/using-python/bg/why_bg.png) no-repeat
      center center / cover;
  }

  .no-sub-why-card-wrap {
    max-width: 54rem;
    margin: 0 auto;

    ul {
      display: flex;
      flex-direction: column;
      gap: var(--gutter-md);
    }
  }

  .no-sub-why-card {
    position: relative;

    &:nth-child(even) .no-sub-why-image {
      right: 0;
      left: auto;
      transform: translate(50%, -50%);
    }
  }

  .no-sub-why-card-txt {
    padding: 2rem 4.8rem;
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  }

  .no-sub-why-card-title {
    display: flex;
    align-items: flex-end;
    gap: 0.8rem;

    h3 {
      font-size: var(--heading-4);
      font-weight: 700;
      line-height: var(--line-height-heading);
    }

    span {
      font-size: var(--body-base);
      font-weight: 400;
      color: var(--clr-text-desc);
    }
  }

  .no-sub-why-card-desc {
    margin-top: 1.2rem;

    p {
      font-size: var(--body-base);
      font-weight: 600;
      color: var(--clr-text-body);
    }
  }

  .no-sub-why-image {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

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

  .no-sub-why-cta {
    background: url(../../images/sub/using-python/bg/why_cta_banner.png)
      no-repeat center center / cover;
    color: #fff;
  }

  .no-sub-advantage {
    background: url(../../images/sub/using-python/bg/advantage_bg.png) no-repeat
      center center / cover;
    color: #fff;

    .--cnt ul {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gutter-sm);

      li .icon {
        width: 6.4rem;
        height: 6.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 5rem;
      }
    }

    .glass-card {
      display: flex;
      flex-direction: column;
      gap: 2.4rem;
      align-items: center;
      text-align: center;

      .txt {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;

        .title h3 {
          font-size: var(--body-lg);
          font-weight: 700;
          color: var(--clr-text-title-invert);
        }

        .desc p {
          font-size: var(--body-base);
          font-weight: 400;
          color: var(--clr-text-body-invert);
        }
      }
    }
  }

  .no-sub-key-point {
    background: url(../../images/sub/using-python/bg/key_point_bg.png) no-repeat
      center center / cover;
    color: #fff;
  }

  .no-sub-key-point-headline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: linear-gradient(to right, #4052c7, #1528a6);
    padding: 1.2rem 2.4rem;
    border-radius: 0.8rem;

    p {
      font-size: var(--body-lg);
      font-weight: 700;
      color: var(--clr-text-title-invert);
    }

    svg {
      width: 2.4rem;
      height: 2.4rem;
      fill: var(--clr-text-title-invert);
    }
  }

  .no-sub-key-point-wrap {
    max-width: 62.8rem;
    margin: 0 auto;
  }

  .no-sub-key-point-body {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    padding: 4.8rem 3rem;
    margin-top: 1.6rem;

    .block {
      .title {
        h4 {
          font-size: var(--body-lg);
          font-weight: 700;
          color: var(--clr-text-title-invert);
        }

        p {
          font-size: var(--body-base);
          font-weight: 400;
          color: var(--clr-text-body-invert);
          margin-top: 0.8rem;
        }
      }

      .check-list {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        margin-top: 0.8rem;

        li {
          display: flex;
          align-items: center;
          gap: 0.8rem;
          background: rgba(255, 255, 255, 0.08);
          border-radius: 0.6rem;
          padding: 0.8rem 1.6rem;

          .icon {
            width: 2rem;
            height: 2rem;
            background: rgba(255, 255, 255, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;

            svg {
              width: 1.6rem;
              height: 1.6rem;
              fill: var(--clr-text-title-invert);
            }
          }

          p {
            font-size: var(--body-base);
            font-weight: 400;
            color: var(--clr-text-body-invert);
          }
        }
      }
    }
  }

  .no-sub-recommend {
    background: url(../../images/sub/using-python/bg/recommend_bg.png) no-repeat
      center center / cover;
    color: #fff;

    .no-sub-section-title h2 {
      background: linear-gradient(to bottom, #fff, #ddd);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .--cnt ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gutter-sm);

      li {
        display: flex;
        align-items: center;
        flex-direction: column;
        border-radius: 1.2rem;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.24);
        background: rgba(255, 255, 255, 0.04);
      }
    }
  }

  .no-sub-recommend-image {
    overflow: hidden;

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

  .no-sub-recommend-txt {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.6rem;
    width: 100%;

    p {
      font-size: var(--body-base);
      font-weight: 500;
      color: var(--clr-text-body-invert);
    }
  }

  .no-sub-recommend-num {
    font-size: var(--body-base);
    width: 2.8rem;
    height: 2.8rem;
    background: rgba(44, 111, 227, 0.12);
    font-weight: 700;
    color: #2c6fe3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .no-sub-curriculum {
    background: url(../../images/sub/using-python/bg/curriculum_bg.png)
      no-repeat center center / cover;

    .step-badge {
      background: var(--primary-main);
    }
  }

  .no-sub-review {
    background: url(../../images/sub/using-python/bg/review_bg.png) no-repeat
      center center / cover;

    .step-badge {
      background: var(--primary-main);
    }

    .no-sub-review-marquee {
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 12rem;
        height: 100%;
        background: linear-gradient(to right, #fafafa 0%, transparent 100%);
        z-index: 10;
        pointer-events: none;
      }

      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 12rem;
        height: 100%;
        background: linear-gradient(to left, #fafafa 0%, transparent 100%);
        z-index: 10;
        pointer-events: none;
      }
    }

    .reviews-marquee {
      width: 100%;
      position: relative;
      display: flex;
      align-items: flex-start;
    }

    .reviews-marquee-1 {
      margin-top: 4rem;
    }

    .reviews-marquee-2 {
      margin-top: 2.4rem;
    }

    .reviews-marquee-track {
      width: fit-content;
      display: flex;
      gap: 2.4rem;
      will-change: transform;
      position: relative;
    }

    .reviews-marquee-list {
      display: flex;
      gap: 2.4rem;
      flex-shrink: 0;
      padding-right: 0;
      padding-left: 0;
    }

    .review-card {
      flex-shrink: 0;
      width: 36rem;
      background: #fff;
      border-radius: 0.8rem;
      padding: 2rem;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }

    .review-body {
      font-size: var(--body-base);
      color: var(--clr-text-body);
      flex: 1;

      p {
        margin: 0;
      }
    }

    .review-title {
      margin-top: auto;
      display: flex;
      align-items: center;
      gap: 0.4rem;

      .review-name {
        font-size: var(--body-lg);
        font-weight: 700;
        color: var(--clr-text-title);
      }

      .review-label {
        font-size: var(--body-base);
        color: var(--clr-text-desc);
      }
    }
  }

  .curriculum-num {
    font-size: var(--heading-4);
    font-weight: 700;
    color: var(--primary-sub);
    min-width: 3.2rem;
  }

  .curriculum-title {
    font-size: var(--heading-4);
  }

  .curriculum-icons {
    display: flex;
    align-items: center;
    gap: 0.8rem;

    img {
      width: 2.4rem;
      height: 2.4rem;
      object-fit: contain;
    }
  }

  .no-sub-info {
    --sub-info-text-color: #fff;
    --sub-info-title-color: var(--primary-sub);
    --sub-info-body-color: var(--clr-text-body-invert);
    --sub-info-link-color: var(--clr-text-body-invert);
    --sub-info-lead-color: var(--clr-text-body-invert);
    --sub-info-item-border: 1px solid rgba(255, 255, 255, 0.1);

    background: url(../../images/sub/using-python/bg/info_bg.png) no-repeat
      center center / cover;
  }
}

@media (max-width: 768px) {
  #using-python {
    .no-sub-advantage .--cnt ul {
      grid-template-columns: repeat(2, 1fr);
    }

    .no-sub-review .review-card {
      width: 28rem;
    }
  }
}

@media (max-width: 544px) {
  #using-python {
    .no-sub-why-card-wrap {
      max-width: 100%;
    }

    .no-sub-why-card-txt {
      padding: 1.6rem;
      border-radius: 0.8rem;
    }

    .no-sub-why-image {
      display: none;
    }

    .no-sub-advantage .--cnt ul {
      grid-template-columns: 1fr;
    }

    .no-sub-key-point-body {
      padding: 2.4rem 1.6rem;
    }

    .no-sub-recommend .--cnt ul {
      grid-template-columns: 1fr;

      li {
        border-radius: 0.8rem;
      }
    }

    .no-sub-review .review-card {
      width: 24rem;
    }
  }
}