.image-block {
  width: 100%;
  padding: 80px 112px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  background-color: #ffffff;
  flex-wrap: nowrap;
}

.single-image-block {
  padding: 80px 112px;
}

.image-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: calc(50% - 16px);
}

.image-card img {
  width: 100%;
  display: block;
}

.text-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.text-block:has(.title[style*="display: none"]):has(
    .paragraph[style*="display: none"]
  ) {
  display: none;
}

.single-image {
  width: var(--single-image-width, 100%);
  display: block;
}

.single-image.align-left {
  margin-right: auto;
}
.single-image.align-center {
  margin-left: auto;
  margin-right: auto;
}
.single-image.align-right {
  margin-left: auto;
}

.input-control:has(#singleImageWidthMode option[value="fill"]:checked)
  #singleImageWidth,
.input-control:has(#singleImageWidthModeResponsive option[value="fill"]:checked)
  #singleImageWidthResponsive {
  opacity: 0.5;
  pointer-events: none;
}

@container (max-width: 1440px) {
  .image-block,
  .single-image-block {
    padding: 80px 32px;
  }
}

@container (max-width: 1215px) {
  .image-block,
  .single-image-block {
    padding: 80px 32px;
  }

  .image-card {
    width: calc(50% - 16px);
  }
}

@container (max-width: 1024px) {
  .image-block,
  .single-image-block {
    padding: 40px 32px;
    flex-direction: column;
    gap: 32px;
  }

  .image-card {
    width: 100% !important;
  }
}

@container (max-width: 540px) {
  .image-block,
  .single-image-block {
    padding: 40px 16px;
  }
}