.block__text-image {
  .text-image.has-image-frame {
    .field--type-image img {
      padding: 1rem;
      border-radius: 40px;
    }
  }

  .text-image {
    display: grid;
    column-gap: 2rem;
    row-gap: 1rem;
    align-items: center;

    .field--type-image,
    .field--type-entity-reference {
      float: none;
      margin: 0;

      img {
        margin-bottom: 0;
        border-radius: 15px;
        display: block;
        margin: 0 auto;
        width: 100%;
      }
    }
  }

  .text-image.one-field-only {
    @media (min-width: 576px) {
      width: 80%;
      margin: 0 auto;
    }
  }

  .text-image.has-image-frame {
    .green-blue .field--type-image {
      position: relative;
      z-index: 5;


      &:before {
        content: "";
        position: absolute;
        z-index: 4;
        right: 0;
        top: 0;
        width: 50%;
        height: 66%;
        background-color: var(--csa-blue--mid);
        border-radius: 15px;
        transform: rotate(-0.5deg);
      }

      &:after {
        content: "";
        position: absolute;
        z-index: 4;
        bottom: 0;
        left: 0;
        width: 80%;
        height: 75%;
        background-color: var(--csa-green--mid);
        border-radius: 15px;
        transform: rotate(-0.75deg);
      }
    }

    .teal-purple .field--type-image {
      position: relative;
      z-index: 5;


      &:before {
        content: "";
        position: absolute;
        z-index: 4;
        left: 0;
        top: 0;
        width: 50%;
        height: 66%;
        background-color: var(--csa-teal--mid);
        border-radius: 15px;
        transform: rotate(-0.5deg);
      }

      &:after {
        content: "";
        position: absolute;
        z-index: 4;
        bottom: 0;
        right: 0;
        width: 50%;
        height: 90%;
        background-color: var(--csa-purple--mid);
        border-radius: 15px;
        transform: rotate(-0.75deg);
      }
    }

    .red-purple .field--type-image {
      position: relative;
      z-index: 5;


      &:before {
        content: "";
        position: absolute;
        z-index: 4;
        right: 0;
        top: 0;
        width: 85%;
        height: 66%;
        background-color: var(--csa-red--mid);
        border-radius: 15px;
        transform: rotate(-0.5deg);
      }

      &:after {
        content: "";
        position: absolute;
        z-index: 4;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 90%;
        background-color: var(--csa-purple--mid);
        border-radius: 15px;
        transform: rotate(-0.75deg);
      }
    }

    img {
      position: relative;
      z-index: 5;
    }
  }



  .text-image__text {
    display: flex;
    justify-content: center;
    flex-flow: column;

    h2 {
      font-size: 1.5rem;
    }
  }
}

.block__text-image.text-left {
  .text-image {

    @media (min-width: 576px) {
      grid-template-columns: 3fr 2fr;
    }
  }
}

.block__text-image.text-right {
  .text-image {
    @media (min-width: 576px) {
      grid-template-columns: 2fr 3fr;
    }
  }
}

/* Landing page specific styles */

.landing-page {
  .block__text-image {
    margin: 2rem 0;

    @media (min-width: 768px) {
      margin: 3rem 0;
    }

    h2 {
      font-size: 2rem;
    }
  }
}