.two-col {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 var(--wp--preset--spacing--40);

  @media (min-width: 1024px) {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  @media (min-width: 1280px) {
  }

  & .two-col__picture {
    order: -1;
    width: 100%;
    height: 200px;
    min-height: unset;

    @media (min-width: 480px) {
      height: 250px;
    }

    @media (min-width: 770px) {
      height: 300px;
    }

    @media (min-width: 1024px) {
      order: unset;
      height: 375px;
    }
  }

  & .two-col__text-box {
    & .wp-block-buttons {
      width: 100%;
      max-width: 350px;
      margin: 0 auto;

      @media (min-width: 1024px) {
        width: max-content;
        margin: 0;
      }

      & .wp-block-button {
        width: 100%;

        & a {
          width: 100%;
        }
      }
    }

    width: 100%;

    @media (min-width: 1024px) {
      max-width: 430px;
    }
  }

  & > :nth-child(1).two-col__picture {
    @media (min-width: 1024px) {
      margin-left: max(-12px, -10vw);
    }

    @media (min-width: 1190px) {
      margin-left: max(-24px, -10vw);
    }

    @media (min-width: 1280px) {
      margin-left: max(-125px, -6vw);
    }
  }

  &.two-col--two-text-col {

    @media (min-width: 1024px) {
      grid-template-columns: 375px 1fr;
      gap: 70px;
    }

    @media (min-width: 1280px) {
      gap: 90px;
    }

    &:has(:nth-child(2).two-col__picture) {
      @media (min-width: 1024px) {
        grid-template-columns: 1fr 375px;
      }
    }

    & > .two-col__picture {
      order: unset;
      margin-left: 0;
      height: 200px;

      @media (min-width: 480px) {
        height: 220px;
      }

      @media (min-width: 770px) {
        height: 275px;
      }

      @media (min-width: 1024px) {
        max-width: 375px;
        height: 325px;
      }
      @media (min-width: 1280px) {
        height: 375px;
      }
    }

    & .two-col__text-box {
      @media (min-width: 1024px) {
        max-width: unset;
    }
    }

    & .two-col__text-container {
      width: 100%;
      column-count: 1;

      @media (min-width: 770px) {
        column-count: 2;
        column-gap: 20px;
      }

      &>p {
        max-width: 100%;
      }
    }
  }

}