@if ($wc-use-respond == 1) {
  // Default responsive design for GridLayout
  // opt-in by setting class "wc-respond" on its containing WPanel.
  // This is a proof of concept and is probably overkill. Ths is why it has
  // its own var to turn it off.
  @if ($wc-use-respond-gridlayout == 1) {
    @include respond-small-screen {
      .wc-respond {
        // NOTE: I used loops here but removed them as the output CSS is
        // much larger. It seems that the Sass compiler and css-cleaner
        // are not able to compress these complex rules correctly.
        > .wc-gridlayout-col-6,
        > .wc-gridlayout-col-7,
        > .wc-gridlayout-col-8,
        > .wc-gridlayout-col-9,
        > .wc-gridlayout-col-10,
        > .wc-gridlayout-col-11,
        > .wc-gridlayout-col-12 {
          > .wc_gl_row {
            @include flex-wrap(wrap);

            + .wc_gl_row,
            > .wc-cell {
              margin-top: $wc-gap-small;
            }

            > :first-child,
            > :nth-child(2),
            > :nth-child(3) {
              margin-top: 0;
            }
          }
        }

        // 6, 9 cols simulate 3 cols
        > .wc-gridlayout-col-6,
        > .wc-gridlayout-col-9 {
          > .wc_gl_row {
            > .wc-cell {
              width: percentage(1 / 3);
            }

            > :nth-child(3n) {
              padding-right: 0;
            }

            > :nth-child(3n - 2) {
              padding-left: 0;
            }
          }
        }

        // 7, 8, 11, 12 simulate 4 cols.
        > .wc-gridlayout-col-7,
        > .wc-gridlayout-col-8,
        > .wc-gridlayout-col-11,
        > .wc-gridlayout-col-12 {
          > .wc_gl_row {
            > .wc-cell {
              width: 25%;
            }

            > :nth-child(4) {
              margin-top: 0;
            }

            > :nth-child(4n) {
              padding-right: 0;
            }

            > :nth-child(4n - 3) {
              padding-left: 0;
            }
          }
        }

        // 10 cols simulate 5 cols.
        > .wc-gridlayout-col-10 > .wc_gl_row {
          > .wc-cell {
            width: 20%;
          }

          > :nth-child(4),
          > :nth-child(5) {
            margin-top: 0;
          }

          > :nth-child(5n) {
            padding-right: 0;
          }

          > :nth-child(5n - 4) {
            padding-left: 0;
          }
        }
      }
    }
  }

  @include respond-phonelike {
    // WPanel Types BOX and FOOTER
    // Reduce padded panels on narrow viewports.
    @if ($wc-gap-reduce-when-narrow == 1) {
      .wc-panel-type-box,
      .wc-panel-type-feature,
      footer {
        padding: $wc-phone-gap-normal;
      }
    }
    // WPanel Type HEADER
    @if ($wc-header-h1-size-small != -1) {
      [role='banner'] {
        h1 {
          font-size: $wc-header-h1-size-small;
        }
      }
    }

    // Default responsive design for rows and columns
    // opt-in for ColumnLayout by setting class "wc-respond" on its
    // containing WPanel.
    // opt in for WRow/WColumn by setting class "wc-respond" the WRow.
    .wc-row.wc-respond {
      display: block;

      > .wc-column {
        display: block;
        padding-left: 0;
        padding-right: 0;
        width: 100%;

        + .wc-column {
          margin-top: $wc-gap-small;
        }
      }
    }

    // GridLayout
    @if ($wc-use-respond-gridlayout == 1) {
      .wc-respond {
        > .wc-gridlayout-col-5 > .wc_gl_row {
          @include flex-wrap(wrap);
        }

        > .wc-gridlayout > .wc_gl_row {
          > .wc-cell {
            margin-top: $wc-gap-small;
            width: 50%;
          }

          > :first-child,
          > :nth-child(2) {
            margin-top: 0;
          }
        }

        > .wc-gridlayout-col-4,
        > .wc-gridlayout-col-5,
        > .wc-gridlayout-col-7,
        > .wc-gridlayout-col-8,
        > .wc-gridlayout-col-11 {
          > .wc_gl_row {

            > :nth-child(even) {
              padding-right: 0;
            }

            > :nth-child(odd) {
              padding-left: 0;
            }
          }
        }

        > .wc-gridlayout-col-3,
        > .wc-gridlayout-col-6,
        > .wc-gridlayout-col-9,
        > .wc-gridlayout-col-12 {
          > .wc_gl_row {
            > .wc-cell {
              width: percentage(1 / 3);
            }

            > :nth-child(3) {
              margin-top: 0;
            }

            > :nth-child(3n) {
              padding-right: 0;
            }

            > :nth-child(3n - 2) {
              padding-left: 0;
            }
          }
        }
      }
    }
  }
}
