gt-block-content-and-image {
  position: relative;
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--color__gray-50);
  --gt-ci-container: clamp(240px, 90vw, 1270px);
  --gt-ci-gap: clamp(24px, 3vw, 48px);
  --gt-ci-content-pad: clamp(16px, 4vw, 90px)
}
gt-block-content-and-image .ci-grid {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: clamp(320px,38vw,640px)
}
gt-block-content-and-image .ci-content {
  flex: 0 0 60%;
  display: flex;
  align-items: center;
  padding-block: clamp(48px,6vw,90px);
  position: relative;
  z-index: 2
}
gt-block-content-and-image .ci-content-inner {
  width: 100%;
  padding-left: calc((100vw - var(--gt-ci-container))/ 2);
  padding-right: var(--gt-ci-content-pad)
}
gt-block-content-and-image .ci-content-inner > .acf-innerblocks-container {
  width: 100%;
  min-height: 140px
}
gt-block-content-and-image .ci-media {
  flex: 0 0 40%;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  z-index: 1
}
gt-block-content-and-image .ci-image,
gt-block-content-and-image .ci-image-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--gt-ci-object-position,center center);
  display: block;
  pointer-events: none
}
gt-block-content-and-image .ci-image-placeholder {
  display: grid;
  place-items: center;
  font-size: 14px;
  color: rgba(0,0,0,.55);
  background: rgba(0,0,0,.03)
}
gt-block-content-and-image[data-image-side=right] .ci-grid {
  flex-direction: row
}
gt-block-content-and-image[data-image-side=left] .ci-grid {
  flex-direction: row-reverse
}
gt-block-content-and-image[data-image-side=left] .ci-content-inner {
  padding-right: calc((100vw - var(--gt-ci-container))/ 2);
  padding-left: var(--gt-ci-content-pad)
}
@media (max-width:900px) {
  gt-block-content-and-image[data-image-side=left] .ci-grid,
  gt-block-content-and-image[data-image-side=right] .ci-grid {
    flex-direction: column-reverse;
    min-height: 0
  }
  gt-block-content-and-image .ci-content,
  gt-block-content-and-image .ci-media {
    flex: 0 0 auto;
    width: 100%
  }
  gt-block-content-and-image .ci-content-inner {
    padding-left: var(--gt-ci-content-pad);
    padding-right: var(--gt-ci-content-pad)
  }
  gt-block-content-and-image .ci-media {
    position: relative;
    overflow: hidden;
    height: clamp(260px,70vw,420px);
    min-height: clamp(260px,70vw,420px);
    margin: 0
  }
  gt-block-content-and-image .ci-image,
  gt-block-content-and-image .ci-image-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
  }
}