.general-image-text-component-container {
  &[data-theme="dark"] {
    background: var(--dark-base-grey-100-base) !important;
    /* .text-and-image .image-and-points .points.background-no {
      background: transparent;
    } */
  }
  .above-and-tips {
    gap: 20px;
    @media (max-width: 767px) {
      gap: 8px;
    }
  }
  .text-and-image {
    gap: 40px;
    @media (max-width: 767px) {
      gap: 32px;
    }
    .subtitle-and-title_content {
      gap: 8px;
      @media (max-width: 767px) {
        gap: 4px;
      }
      &.align-left * {
        text-align: left;
      }
      &.align-center * {
        text-align: center;
      }
      .title-and-content {
        gap: 24px;
        @media (max-width: 767px) {
          gap: 16px;
        }
        @media (min-width: 768px) {
          &.row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 80px;
          }
        }
      }
    }
    .image-and-points {
      border-radius: 8px;
      overflow: hidden;
      .image {
        overflow: hidden;
        &.backgound-no {
          border-radius: 8px;
        }
        &.backgound-yes {
          border-radius: 8px 8px 0 0;
        }
        @media (max-width: 767px) {
          border-radius: 8px;
        }
        img {
          width: 100%;
          float: left;
        }
      }
      .points {
        padding: 20px;
        display: grid;
        gap: 24px 20px;
        grid-auto-rows: min-content;
        background: #e7e7e7;
        &.background-no {
          padding: 16px 0 0;
          gap: 12px;
          background: #fff;
        }
        /* &.background-yes {
          .point-item {
            padding: 0 !important;
          }
        } */

        @media (max-width: 767px) {
          padding: 12px 0 0 !important;
          background: #fff !important;
          gap: 8px !important;
        }
        &.text-align-left * {
          text-align: left;
        }
        &.text-align-center * {
          text-align: center;
        }
        @media (max-width: 767px) {
          &.one-mob-column {
            grid-template-columns: repeat(1, 1fr);
          }
          &.two-mob-column {
            grid-template-columns: repeat(2, 1fr);
          }
        }
        @media (min-width: 768px) {
          &.two-column {
            grid-template-columns: repeat(2, 1fr);
          }
          &.three-column {
            grid-template-columns: repeat(3, 1fr);
          }
          &.four-column {
            grid-template-columns: repeat(4, 1fr);
          }
        }

        .point-item {
          gap: 8px;
          padding: 16px;
          background: #e7e7e7;
          border-radius: 8px;
          @media (min-width: 768px) {
            &.flex-column {
              .icon {
                width: 100%;
              }
              .title-and-text {
                width: 100%;
                /* flex: unset; */
              }
            }
          }
          .icon {
            /* img {
              width: 80px;
              @media (max-width: 767px) {
                width: 40px;
              }
            } */
            &.size-large {
              min-width: 80px;
              img {
                width: 80px;
              }
            }
            &.size-normal {
              min-width: 64px;
              img {
                width: 64px;
              }
            }
            &.size-small {
              min-width: 32px;
              img {
                width: 32px;
              }
            }
            @media (max-width: 767px) {
              &.size-large img {
                width: 40px;
              }
              &.size-normal img {
                width: 32px;
              }
              &.size-small img {
                width: 24px;
              }
            }
          }
          .title-and-text {
            gap: 4px;
            flex: 1;
            &.bottom {
              flex-direction: column-reverse;
            }
            ._title {
              font-weight: 600;
              &.large-font {
                font-size: 32px;
                @media (max-width: 767px) {
                  font-size: 28px;
                }
              }
            }
          }
        }
      }
    }
  }
  .tips {
    &.text-align-left {
      text-align: left;
    }
    &.text-align-center {
      text-align: center;
    }
  }
  .flex {
    display: flex;
  }
  .flex-column {
    display: flex;
    flex-direction: column;
  }
  .align-items-center {
    align-items: center;
  }
  .align-items-start {
    align-items: flex-start;
  }
  .align-items-stretch {
    align-items: stretch;
  }
  .space-between {
    justify-content: space-between;
  }
}