Fix nested style have redundant CSS

[KhooHaoYit]

This PR fixes the way how a nested style gets generated using max-screen

The bug occurred because it tries to use the container without cloning it first

This PR also includes a test to check for this bug in the future

Expected result:

@media not all and (min-width: 768px) {
  .max-md\:2-wide-grid {
    display: grid;
  }
  .max-md\:2-wide-grid > * {
    grid-column: span 2;
  }
}

Actual result:

@media not all and (min-width: 768px) {
  .max-md\:2-wide-grid {
    display: grid;
  }
  @media not all and (min-width: 768px) {
    .max-md\:2-wide-grid {
      display: grid;
    }
  }
  .max-md\:2-wide-grid > * {
    grid-column: span 2;
  }
}

[thecrypticace]

Thanks!