:root {
  --ckeditor-simple-layout-property-gutter: 4rem;
  --ckeditor-simple-layout-property-gutter--adjusted: 6rem;
  --ckeditor-simple-layout-property-gutter--reduced: 2rem;

  --ckeditor-simple-layout-property-margin-top: 0;
  --ckeditor-simple-layout-property-margin-bottom: 0;
  --ckeditor-simple-layout-property-margin-top--adjusted: 4rem;
  --ckeditor-simple-layout-property-margin-bottom--adjusted: 4rem;

  --ckeditor-simple-layout-property-padding: 0;
  --ckeditor-simple-layout-property-padding--adjusted: 2rem;

  --ckeditor-simple-layout-property-border: 1px solid rgba(0, 0, 0, .5);
  --ckeditor-simple-layout-wrapper-background: rgba(0, 0, 0, .1);

}

.layout-simple--two-col,
.layout-simple--three-col {
  display: grid;
  gap: var(--ckeditor-simple-layout-property-gutter);
  margin-top: var(--ckeditor-simple-layout-property-margin-top);
  margin-bottom: var(--ckeditor-simple-layout-property-margin-bottom);
  .layout__col {
    padding: var(--ckeditor-simple-layout-property-padding);
  }
}

.ck.ck-content .layout-simple--two-col,
.ck.ck-content .layout-simple--three-col {
  /* Adjust padding for better catching when we focus on wrapper, not col when editing. */
  padding: 5px;
}


.layout-simple-property--border {
  border: var(--ckeditor-simple-layout-property-border);
}
.layout-simple-property--background {
  background-color: var(--ckeditor-simple-layout-wrapper-background);
}
.layout-simple-property--adjust-gutter {
  gap: var(--ckeditor-simple-layout-property-gutter--adjusted);
}
.layout-simple-property--reduce-gutter {
  gap: var(--ckeditor-simple-layout-property-gutter--reduced);
}
.layout-simple-property--adjust-margin-top {
  margin-top: var(--ckeditor-simple-layout-property-margin-top--adjusted) !important;
}
.layout-simple-property--adjust-margin-bottom {
  margin-bottom: var(--ckeditor-simple-layout-property-margin-bottom--adjusted);
}
.layout-simple-property--adjust-padding {
  .layout__col {
    padding: var(--ckeditor-simple-layout-property-padding--adjusted);
  }
}

@media (min-width: 640px) {
  .layout-simple--two-col {
    grid-template-columns: 1fr 1fr;
  }
  .layout-simple--three-col {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* 2col Ratios */
  .layout-simple-ratio--1-2 {
    grid-template-columns: 1fr 2fr;
  }
  .layout-simple-ratio--2-1 {
    grid-template-columns: 2fr 1fr;
  }
  .layout-simple-ratio--1-3 {
    grid-template-columns: 1fr 3fr;
  }
  .layout-simple-ratio--3-1 {
    grid-template-columns: 3fr 1fr;
  }

  /* 3col Ratios */
  .layout-simple-ratio--1-1-1 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .layout-simple-ratio--1-1-2 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .layout-simple-ratio--1-2-1 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .layout-simple-ratio--2-1-1 {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.layout-simple-align--top {
  align-items: start;
}
.layout-simple-align--center {
  align-items: center;
}
.layout-simple-align--bottom {
  align-items: end;
}