/********************************************************************************************************************************
 * Mailing Groups field type styling
********************************************************************************************************************************/

.mailing-groups-grid,
.mailing-group-section {
  margin: 1.5rem 0;
}
.mailing-groups-checkboxes .form-item.form-type-checkbox {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.mailing-groups-checkboxes .overall-status label,
.form-item-mailing-groups-overall-status label,
.mailing-group-section .section-label {
  margin: 0.25rem 0;
  font-size: 1.1rem;
  font-weight: bold;
}
.mailing-groups-checkboxes a.group-edit {
  font-size: 0.9em;
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  margin-left: 0.75rem;
}

/********************************************************************************************************************************
 * Mailing Groups grid-style checkboxes
********************************************************************************************************************************/

.mailing-groups-grid .form-type-checkbox .congruent-description {
  padding-left: 0;
}
.mailing-groups-grid input[type="checkbox"] {
  display: none !important;
}
.mailing-groups-grid input[type="checkbox"] + label {
  display: block !important;
  width: 100%;
  height: 100%;
}
.mailing-groups-grid input[type="checkbox"] + label img {
  border: 2px solid transparent;
  padding: 1px;
  background: #fff;
}
.mailing-groups-grid input[type="checkbox"]:checked + label img {
  border: 2px solid #333;
}
.mailing-groups-grid input[type="checkbox"] + label h3 {
  margin: 0.75rem 0 0.5rem;
  font-size: 1.5rem;
}

@media all and (min-width: 640px) {

  /* Target both items within the main View wrapper as well as inside an attachment. */
  .mailing-groups-grid.two-column-layout,
  .mailing-groups-grid.three-column-layout {
    display: grid;
    grid-template-columns: 48.5% 48.5%;
    grid-column-gap: 3%;
    grid-row-gap: 1.5rem;
  }

  /* Remove margin on the rows, since we're using row-gap from CSS Grid. */
  .mailing-groups-grid.two-column-layout .form-item,
  .mailing-groups-grid.three-column-layout .form-item,
  .mailing-groups-grid.four-column-layout .form-item {
    margin-top: 0;
    margin-bottom: 0;
    height: 100%;
    width: 100%;
  }
}

@media all and (min-width: 900px) {
  .mailing-groups-grid.three-column-layout {
    grid-template-columns: 32% 32% 32%;
    grid-column-gap: 2%;
  }
}

@media all and (min-width: 1100px) {
  .mailing-groups-grid.four-column-layout {
    grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
    grid-column-gap: 2%;
  }
}