/* *
 * * Grid for image and video blocks:
   * Asset alone in first column, spanning all rows
   * X alignement in second column
 * */
#fields-grid_2 .matrixblock[data-type="duoRow"] .superTableContainer.columnLayout .matrixblock:not([data-type="text"]) .fields,
#fields-grid_2 .matrixblock[data-type="imageElement"] .fields,
#fields-grid_2 .matrixblock[data-type="videoElement"] .fields {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
  row-gap: 2rem;
}

/* *
 * * Grid for text blocks:
   * 2-columns
 * */
 #fields-grid_2 .matrixblock[data-type="textElement"] .fields {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 2rem;
  row-gap: 2rem;
}

/** turn on at breakpoints */
@media screen and (min-width: 1220px) {
  #fields-grid_2 .matrixblock[data-type="textElement"] .fields {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
  }

  #fields-grid_2 .matrixblock[data-type="imageElement"] .fields,
  #fields-grid_2 .matrixblock[data-type="videoElement"] .fields {
    grid-template-columns: 1fr 1fr;
    max-width: 800px;
    margin: 0 auto;
  }
  #fields-grid_2 .matrixblock[data-type="imageElement"] .fields .field:first-child,
  #fields-grid_2 .matrixblock[data-type="videoElement"] .fields .field:first-child {
    grid-column: 1 / span 2;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  /* #fields-grid_2 .matrixblock[data-type="imageElement"] .fields .field:nth-child(3),
  #fields-grid_2 .matrixblock[data-type="videoElement"] .fields .field:nth-child(3) {
  } */

  #fields-grid_2 .matrixblock[data-type="imageElement"] .fields .field:nth-child(4),
  #fields-grid_2 .matrixblock[data-type="videoElement"] .fields .field:nth-child(4) {
    grid-column: 1 / span 2;
  }
}

/** even wider screens */
@media screen and (min-width: 1500px) {

  /* 3 column image/video element  */
  /* #fields-grid_2 .matrixblock[data-type="imageElement"] .fields,
  #fields-grid_2 .matrixblock[data-type="videoElement"] .fields {
    grid-template-columns: minmax(120px, auto) auto 1fr;
  }
  #fields-grid_2 .matrixblock[data-type="imageElement"] .fields .field:nth-child(4),
  #fields-grid_2 .matrixblock[data-type="videoElement"] .fields .field:nth-child(4) {
    grid-column: 3;
    grid-row: 1 / span 2;
  } */

  /* 2 column layout of duo row blocks  */
  #fields-grid_2 .matrixblock[data-type="duoRow"] .superTableContainer.columnLayout .matrixblock:not([data-type="text"]) .fields {
    grid-template-columns: 1fr 1fr 1fr;
  }
  #fields-grid_2 .matrixblock[data-type="duoRow"] .superTableContainer.columnLayout .matrixblock:not([data-type="text"]) .fields .field:first-child{
    grid-column: 1 / span 3;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  /* #fields-grid_2 .matrixblock[data-type="duoRow"] .superTableContainer.columnLayout .matrixblock:not([data-type="text"]) .fields .field:nth-child(3) {
    grid-column-start: 2;
  } */
  #fields-grid_2 .matrixblock[data-type="duoRow"] .superTableContainer.columnLayout .matrixblock:not([data-type="text"]) .fields .field:nth-child(5) {
    grid-column: 1 / span 3;
  }
}


/* *
 * * Reset margins sine elements are spaced with rov-/col-gap
 * */
 #fields-grid_2 .matrixblock[data-type="duoRow"] .superTableContainer.columnLayout .matrixblock:not([data-type="text"]) .fields  .field,
#fields-grid_2 .matrixblock[data-type="textElement"] .fields .field,
#fields-grid_2 .matrixblock[data-type="videoElement"] .fields .field,
#fields-grid_2 .matrixblock[data-type="imageElement"] .fields .field {
  margin-top: 0;
  margin-bottom: 0;
}

/* *
 * * Top align all supertable cells
 * */
 .superTable-table tbody tr td {
  vertical-align: top !important;
 }

 /* *
  * * Simplify styling of nested Matrix:
  * */
  #fields-grid_2  .matrixblock[data-type="duoRow"] > .fields > .field > .heading,
  #fields-grid_2  .matrixblock[data-type="trioRow"] > .fields > .field > .heading {
    display: none
  }

  #fields-grid_2 .superTable-table {
    box-shadow: none !important;
    border-radius: 0 !important;
    border-style: none !important;
  }

  #fields-grid_2 .superTable-table .checkbox,
  #fields-grid_2 .superTable-table .move {
    display: none;
  }

  #fields-grid_2 .superTable-table  .matrixblock > .titlebar {
    padding-left: 5px;
  }
  #fields-grid_2 .superTable-layout-table thead tr th {
    border-bottom: 0 !important;
    background: transparent !important;
  }
  #fields-grid_2 .superTable-layout-table tbody tr td {
    background-color: transparent !important;
  }

  /* #fields-grid_2 .superTable-layout-table tbody tr td:nth-child(2) {
    padding-left: 0px;
  } */