.ql-cta-grid-single {
  padding: 80px 40px;
  position: relative;
}

.has-background-image .ql-cta-grid-single.bg-black {
  background: rgba(67, 67, 69, 0.85);
}
.has-background-image .ql-cta-grid-single.bg-primary {
  background: rgba(104, 160, 202, 0.85);
}
.has-background-image .ql-cta-grid-single.bg-secondary {
  background: rgba(224, 130, 78, 0.85);
}

.ql-cta-grid-single.bg-black {
  background: rgba(67, 67, 69, 1);
}
.ql-cta-grid-single.bg-primary {
  background: rgba(104, 160, 202, 1);
}
.ql-cta-grid-single.bg-secondary {
  background: rgba(224, 130, 78, 1);
}

.ql-cta-grid-single .ql-cta-grid-single-inner * {
  color: #fff;
}

.ql-cta-grid-single .ql-icon svg path,
.ql-cta-grid-single .ql-icon svg ellipse,
.ql-cta-grid-single .ql-icon svg circle,
.ql-cta-grid-single .ql-icon svg rect {
  fill: #fff;
}

/* Editor */
.acf-block-preview .ql-cta-grid-single {
  padding: 10px;
  padding-top: 30px;
  border: 2px dotted #ccc;
  position: relative;
}

.acf-block-preview .ql-cta-grid-single::before {
  content: "Grid Item";
  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-single {
    padding: 160px 80px;
    background: transparent !important;
  }
}

@media only screen and (max-width: 480px) {
  .ql-cta-grid-single {
    padding: 60px 20px;
  }
}
