.image-and-textblock {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 226px auto;
}
.image-and-textblock .content-block {
  margin-block-start: calc(var(--spacing) * -10);
  margin-inline-start: calc(var(--spacing) * 6);
}
@media screen and (min-width: 640px) {
  .image-and-textblock .content-block {
    margin-block-start: calc(var(--spacing) * -15);
    margin-inline-start: calc(var(--spacing) * 20);
  }
}
@media screen and (min-width: 768px) {
  .image-and-textblock .content-block {
    margin-block-start: calc(var(--spacing) * -30);
    margin-inline-start: calc(var(--spacing) * 45);
  }
}
@media screen and (min-width: 1024px) {
  .image-and-textblock .content-block {
    margin-block-start: 0;
    margin-inline-start: 0;
  }
}
.image-and-textblock.image-right .content-block {
  margin-inline: 0 calc(var(--spacing) * 6);
}
@media screen and (min-width: 640px) {
  .image-and-textblock.image-right .content-block {
    margin-inline: 0 calc(var(--spacing) * 20);
  }
}
@media screen and (min-width: 768px) {
  .image-and-textblock.image-right .content-block {
    margin-inline: 0 calc(var(--spacing) * 45);
  }
}
@media screen and (min-width: 1024px) {
  .image-and-textblock.image-right .content-block {
    margin-block-start: 0;
    margin-inline: 0;
  }
}
@media screen and (min-width: 640px) {
  .image-and-textblock {
    grid-template-rows: 344px auto;
  }
}
@media screen and (min-width: 768px) {
  .image-and-textblock {
    grid-template-rows: 460px auto;
  }
}
@media screen and (min-width: 1024px) {
  .image-and-textblock {
    grid-template-rows: auto;
    grid-template-columns: repeat(12, 1fr);
  }
  .image-and-textblock img {
    grid-area: 1/1/2/9;
  }
  .image-and-textblock.image-right img {
    grid-area: 1/5/2/13;
  }
  .image-and-textblock .content-block {
    grid-area: 1/7/2/13;
    align-self: center;
  }
  .image-and-textblock.image-right .content-block {
    grid-area: 1/1/2/7;
  }
}