.text-image{
  &.text-image--customer-review {
    background-color: var(--color-primary--1);
    color: var(--color-white);
  }
  &.variant-contained{
    .full_grid{
      .text-image__image{
        height: 450px;
        img{
          object-fit: contain;
          height: 100%;
          margin: 0 auto;
        }
      }
    }
  }
  &.variant-white{
    background-color: var(--color-white);
    .full_grid{
      .text-image__text{
        color: var(--color-primary--1);
      }
    }
  }
  &.variant-primary_secondary{
    background-color: var(--color-primary--1);
    .full_grid{
      .text-image__text{
        background-color: var(--color-secondary--1);
        color: var(--color-white);
        &::before{
          content: '';
          width: 1014.069px;
          height: 1372.054px;
          position: absolute;
          right: -47px;
          bottom: -567.721px;

          background-image: url("../../images/bar_shape_secondary_1.svg");
        }
        padding-left: var(--px160-percent) !important;
      }
    }
  }
  &.variant-primary{
    background-color: var(--color-primary--1);
    .full_grid{
      .text-image__text{
        color: var(--color-white);
      }
    }
  }
  &.variant-primary_bars{
    background-color: var(--color-primary--1);
    .full_grid{
      .text-image__image{
        &::after{
          content: '';
          width: 100%;
          height: 107px;
          position: absolute;
          left: 0;
          bottom: 0;
          background-color: var(--color-secondary--1);
        }
      }
      .text-image__text{
        color: var(--color-white);
        position: relative;
        z-index: 1;
        &::before{
          position: absolute;
          content: '';
          top: 0;
          left: 0;
          width: 1184px;
          height: 210px;
          z-index: -1;
          background-image: url("../../images/pattern-top-shape--medium.svg");
          background-size: cover;
          background-repeat: no-repeat;
        }
      }
    }
  }
  &.variant-primary_light_bars{
    background-color: var(--color-primary--4);
    .full_grid{
      .text-image__text{
        color: var(--color-primary--1);
        position: relative;
        z-index: 1;
        &::before{
          position: absolute;
          content: '';
          top: 0;
          left: 0;
          width: 1184px;
          height: 210px;
          z-index: -1;
          background-image: url("../../images/pattern-top-shape--light.svg");
          background-size: cover;
          background-repeat: no-repeat;
        }
      }
    }
  }
  &.variant-secondary_bars{
    background-color: var(--color-secondary--1);
    .full_grid{
      .text-image__text{
        color: var(--color-white);
        position: relative;
        z-index: 1;
        &::before{
          position: absolute;
          content: '';
          top: 0;
          left: 0;
          width: 1184px;
          height: 210px;
          z-index: -1;
          background-image: url("../../images/pattern-top-shape--orange.svg");
          background-size: cover;
          background-repeat: no-repeat;
        }
      }
    }
  }
  &.variant-primary_bars2{
    background-color: var(--color-primary--1);
    .full_grid{
      .text-image__text{
        color: var(--color-white);
        position: relative;
        z-index: 1;
        &::before{
          position: absolute;
          content: '';
          top: 0;
          left: 0;
          width: 1184px;
          height: 210px;
          z-index: -1;
          background-image: url("../../images/pattern-top-shape--medium.svg");
          background-size: cover;
          background-repeat: no-repeat;
        }
      }
    }
  }

  .full_grid{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;

    .text-image__image{
      position: relative;
      width: 100%;
      height: 100%;
      article{
        height: 100%;
        picture{
          height: 100%;
          img{
            object-fit: cover;
            height: 333px;
          }
        }
      }
    }
    .text-image__text{
      overflow: hidden;
      position: relative;
      padding: 32px var(--px160-percent);
      display: flex;
      flex-direction: column;
      gap: 32px;

      height: 100%;
      justify-content: center;

      *{
        z-index: 1;
      }

      h2{
        font-size: 40px;
        font-style: normal;
        font-weight: 600;
        line-height: 140%; /* 56px */
        text-transform: uppercase;
      }

      p{
        margin: 0;
      }

      .norms-wrapper{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 8px;
      }
      .cta-wrapper{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap:16px;

        >a{
          flex-shrink: 0;
        }

        &.column{
          flex-direction: column;
        }
      }
    }
  }
}

.path-node .text-image {
  & .full_grid {
    & .text-image__text {
      gap: 16px;
    }
  }
}


/*
MARK: 750 PX
*/
@media all and (min-width: 750px) {
  .text-image{
    &.variant-contained{
      .full_grid{
        .text-image__image{
          padding-left: var(--px160-percent);
          height: unset;
          img{
            margin: 0;
          }
        }
        .text-image__text{
          padding-left: 0;
        }
      }
    }

    .full_grid{
      display: grid;
      grid-template-columns: 1fr 1fr;

      .text-image__image{
        &.right{
          order: 1;
        }

        article{
          picture{
            img{
              height: 100%;
            }
          }
        }
      }
    }
  }
}

/*
MARK: 1060 PX
*/
@media all and (min-width: 1060px) {
  .text-image{
    &.variant-primary_bars{
      .full_grid{
        .text-image__image{
          &::after{
            height: 214px;
          }
        }
      }
    }
    &.variant-primary_light_bars{
      .full_grid{
        .text-image__image{
          &::after{
            height: 214px;
          }
        }
      }
    }
    .full_grid{
      .text-image__text{
        padding: 25px var(--px160-percent);

        .cta-wrapper.column {
          gap: 32px;
        }
      }
    }
  }
}

/*
MARK: 1260 PX
*/
@media all and (min-width: 1260px) {
  .text-image{
    .full_grid{
      .text-image__text{
        padding: 50px var(--px160-percent);
      }
    }
  }
}


/*
MARK: 1260 PX
*/
@media all and (min-width: 1460px) {
  .text-image{
    .full_grid{
      .text-image__text{
        padding: 100px var(--px160-percent);
      }
    }
  }
}