.image-column picture img{
  max-width: 100%;
}

.image-column{
  text-align: center;
}

@media screen and (min-width: 300px) {

  .image-columns-rows{
    overflow: hidden;
  }

  .image-columns-row{
    --gap-width: calc(100vw/16 * .75);
    --column-width: calc((100vw - var(--gap-width) * 2) / 3);
    display: grid;
    margin: 0 auto var(--gap-width);
    font-size: 0;
  }

  .image-columns-row:last-child{
    margin-bottom: 0;
  }

  .image-column picture{
    display: inline-block;
    width: var(--column-width);
  }

  .one-column-center{
    grid-template-columns: var(--column-width);
    width: var(--column-width);
  }

  .one-column-right{
    width: 50%;
    margin-left: 50%;
    text-align: center;
  }

  .one-column-stretched picture,
  .one-column-stretched img{
    width: 100%;
  }

  .two-columns{
    grid-template-columns: var(--column-width) var(--column-width);
    grid-column-gap: var(--gap-width);
    width: calc(100vw/16 * 10.5);

  }

  .three-columns{
    grid-template-columns: var(--column-width) var(--column-width) var(--column-width);
    grid-column-gap: var(--gap-width);
    width: calc(100vw/16 * 16);
  }

}

@media screen and (min-width: 1024px) {
  .two-columns{
    grid-column-gap: var(--gap-width);
  }

  .three-columns{
    grid-column-gap: var(--gap-width);
  }
}