.mign-future-city-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 24px 28px;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: 24px;
  background-color: #e5e3df;
}

.mign-future-city-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mign-future-city-hero__media > .block-editor-inner-blocks,
.mign-future-city-hero__media > .block-editor-inner-blocks > .block-editor-block-list__layout,
.mign-future-city-hero__media > .block-editor-inner-blocks > .block-editor-block-list__layout > *:not(.block-list-appender) {
  height: 100%;
}

.mign-future-city-hero__media > * {
  width: 100%;
}

.mign-future-city-hero__media .wp-block,
.mign-future-city-hero__media .wp-block-cover,
.mign-future-city-hero__media .wp-block-image,
.mign-future-city-hero__media .wp-block-group,
.mign-future-city-hero__media .wp-block-media-text,
.mign-future-city-hero__media .wp-block-video {
  height: 100%;
  margin: 0;
}

.mign-future-city-hero__media img,
.mign-future-city-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mign-future-city-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.18) 100%
  );
  pointer-events: none;
}

.mign-future-city-hero__text {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: min(760px, 92%);
  line-height: 1.05;
  font-family: var(--mign-font-cormorant-infant, "Cormorant Infant", serif);
  font-weight: 500;
}

.editor-styles-wrapper .mign-future-city-hero {
  width: 100%;
}

/* Show the media wrapper as a flex container so appender is visible when no block added */
.mign-future-city-hero__media > .block-editor-inner-blocks {
  display: flex;
  flex-direction: column;
}

.mign-future-city-hero__media > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mign-future-city-hero__media .block-list-appender {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  z-index: 3;
}

@media (max-width: 768px) {
  .mign-future-city-hero {
    padding: 18px;
  }

  .mign-future-city-hero__text {
    max-width: 100%;
    line-height: 1.1;
  }
}