.ql-cta-grid {
  position: relative;
}

.ql-cta-grid .ql-cta-grid-inner,
.acf-block-preview
  .ql-cta-grid
  .ql-cta-grid-inner
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}

.ql-cta-grid .bg-dark span,
.ql-cta-grid .bg-dark p,
.ql-cta-grid .bg-dark cite,
.ql-cta-grid .bg-dark li {
  color: #fff;
}

.ql-cta-grid-background-colour {
  position: absolute;
  inset: 0;
}
.ql-cta-grid-background-colour.desktop {
  display: none;
}
.ql-cta-grid-background-colour.mobile {
  display: block;
}

/* Editor */
.acf-block-preview .ql-cta-grid-inner > .block-editor-inner-blocks {
  padding-top: 40px;
  position: relative;
}

.acf-block-preview .ql-cta-grid-inner > .block-editor-inner-blocks::before {
  content: "CTA Grid";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #eaeaea;
  color: #646464;
  font-size: 14px;
  padding: 4px 8px;
}

@media only screen and (min-width: 960px) {
  .ql-cta-grid .ql-cta-grid-inner,
  .acf-block-preview
    .ql-cta-grid
    .ql-cta-grid-inner
    > .block-editor-inner-blocks
    > .block-editor-block-list__layout {
    grid-template-columns: 1fr 1fr;
  }

  .ql-cta-grid-background-colour.desktop {
    display: block;
  }
  .ql-cta-grid-background-colour.mobile {
    display: none;
  }

  /* Editor */
  .acf-block-preview .ql-cta-grid .ql-cta-grid-inner {
    display: block;
    max-width: unset;
    margin-left: unset;
    margin-right: unset;
  }
}

@media only screen and (max-width: 480px) {
  .ql-cta-grid {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    margin-top: 40px !important;
  }
}