.image-text-pair {
    display: flex;
    gap: 4px;
    align-items: stretch;
    background-color: #DBB577;
    padding: 4px;
    margin-top: 6px;
    margin-bottom: 24px;
  }

  /* .image-text-pair.light-brown {
    background-color: #F2C14E;
  }

  .image-text-pair.salmon {
    background-color: #E07A5F;
  } */



  .image-wrapper {
    display: flex;
    align-items: stretch;
  }

  

  .image-wrapper img {
    height: 110%;
    object-fit: cover;
    display: block;
    max-width: 240px;
    clip-path: inset(0 0 10% 0);
  }

  .image-wrapper.square-image img {
    max-width: 200px;
  }
  

 /*  .image-text-pair .text-wrapper * {
    margin-top: 6px;
    margin-bottom: 6px;
  } */

  .image-text-pair .text-wrapper > :first-child {
    margin-top: 0;
  }

  .image-text-pair .text-wrapper > :last-child {
    margin-bottom: 0;
  }

  .image-wrapper,
  .image-text-pair .text-wrapper p,
  .image-text-pair .text-wrapper h3,
  .image-text-pair .text-wrapper h4 {
    background-color: #fff;
    padding: 5px;
  }

  .image-text-pair .text-wrapper p,
  .image-text-pair .text-wrapper h3,
  .image-text-pair .text-wrapper h4 {
  margin: 5px 0;
}

  /* @media (max-width: 639px) { */
  @media (max-width: 767px) {
    .image-text-pair {
      flex-direction: column;
    }

    .image-wrapper {
      order: -1;
    }

    .image-wrapper img,
    .image-wrapper.square-image img {
      max-width: 100%;
      height: auto;
      clip-path: none;
    }
  }
  
  /* See: Spectre.css
  col-md-<1-12> apply to window width smaller than or equal to 840px.
  https://picturepan2.github.io/spectre/layout/responsive.html */
  @media (min-width: 768px) and (max-width: 839px) {  
    .image-text-pair {
      flex-direction: row;
    }

    .image-wrapper {
      order: inherit;
    }

    .image-wrapper img,
    .image-wrapper.square-image img {
      max-width: 340px;
      height: 110%;
    }
  }
  
  /* See: Spectre.css
  col-lg-<1-12> apply to window width smaller than or equal to 960px.
  https://picturepan2.github.io/spectre/layout/responsive.html */
  @media (min-width: 840px) and (max-width: 959px) {
  
    .image-text-pair {
      flex-direction: row;
    }

    .image-wrapper {
      order: inherit;
    }

    .image-wrapper.wide-rect-image img  {
      max-width: 500px;
    }

    .image-wrapper.square-image img {
      max-width: 400px;
    }

    .image-wrapper img,
    .image-wrapper.square-image img {
      height: 110%;
    }
  }