.image-text-pair {
    display: flex;
    gap: 12px;
    align-items: stretch;
    background-color: #f5f5f5;
    padding: 12px;
    margin-bottom: 24px;
  }

  /* .image-text-pair.red {
    background-color: #c14743;
  }

  .image-text-pair.green {
    background-color: #28835b;
  } */

/* 
\#f5f5f5
\#fdfaf6
\#f0f4f8
\#f3f7f5
\#fffdf0
\#f0fdf9
\#fafafa
\#f4f5f7
\#f1f3f5
\#eceef0
\#e1e4e8
\#3b82f6
\#10b981
\#f59e0b
\#ef4444
 */

  /* .image-text-pair.gray-1 {
    background-color: #f5f5f5;
  } */
  
  .image-text-pair.gray-2 {
    background-color: #fdfaf6;
  }
  
  .image-text-pair.gray-3 {
    background-color: #f0f4f8;
  }
  
  .image-text-pair.gray-4 {
    background-color: #f3f7f5;
  }
  
  .image-text-pair.gray-5 {
    background-color: #fffdf0;
  }
  
  .image-text-pair.gray-6 {
    background-color: #f0fdf9;
  }
  
  .image-text-pair.gray-7 {
    background-color: #fafafa;
  }
  
  .image-text-pair.gray-8 {
    background-color: #f4f5f7;
  }
  
  .image-text-pair.gray-9 {
    background-color: #f1f3f5;
  }
  
  .image-text-pair.gray-10 {
    background-color: #eceef0;
  }
  
  .image-text-pair.gray-11 {
    background-color: #e1e4e8;
  }
  
  .image-text-pair.blue {
    background-color: #3b82f6;
  }
  
  .image-text-pair.green {
    background-color: #10b981;
  }
  
  .image-text-pair.yellow {
    background-color: #f59e0b;
  }
  
  .image-text-pair.red {
    background-color: #ef4444;
  }
  

  .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: 12px;
    margin-bottom: 12px;
  }

  .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;
  }

  /* @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%;
    }
  }