.subscription-flow {
  padding-block: 200px;

  @media screen and (max-width: 768px) {
    padding-block: 100px;
  }
}

.subscription-flow-container {
  display: flex;
  align-items: center;
  gap: 32px;

  @media screen and (max-width: 768px) {
    overflow-x: auto;
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .subscription-flow__flow {
    flex: 1;
    background-color: white;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.160784);
    border-radius: 20px;
    padding: 48px 32px;

    @media screen and (max-width: 768px) {
      flex: 0 0 300px;
      padding: 32px 20px;
    }

    .subscription-flow__flow--icon {
      width: 100%;
      margin-bottom: 36px;
      display: flex;
      justify-content: center;

      @media screen and (max-width: 768px) {
        margin-bottom: 18px;
      }

      .subscription-flow__flow--icon-image {
        height: 90px;

        @media screen and (max-width: 768px) {
          height: 60px;
        }
      }
    }

    .subscription-flow__flow--text {
      font-family: var(--mymoods-font-poppins), sans-serif;
      font-style: normal;
      font-weight: var(--mymoods-font-weight-extrabold);
      font-size: 32px;
      line-height: 50px;
      /* identical to box height */
      text-align: center;
      letter-spacing: -0.011em;
      color: #2B2B2B;
      margin-bottom: 16px;

      @media screen and (max-width: 768px) {
        font-size: 20px;
        margin-bottom: 12px;
        line-height: 1.5;
      }
    }

    .subscription-flow__flow--title {
      font-family: var(--mymoods-font-notosansjp), sans-serif;
      font-style: normal;
      font-weight: var(--mymoods-font-weight-bold);
      font-size: 20px;
      line-height: 38px;
      /* identical to box height, or 165% */
      color: #403C3C;
      padding-bottom: 16px;
      margin-bottom: 24px;
      text-align: center;
      border-bottom: 1px solid #707070;

      @media screen and (max-width: 768px) {
        font-size: 14px;
        padding-bottom: 8px;
        margin-bottom: 12px;
      }
    }

    .subscription-flow__flow--description {
      font-family: Inter, sans-serif;
      font-style: normal;
      font-weight: var(--mymoods-font-weight-regular);
      font-size: 16px;
      line-height: 18px;
      color: #403C3C;

      @media screen and (max-width: 768px) {
        font-size: 14px;
      }
    }
  }
}