/* Wrapper for Side-by-Side Layout */
.dos-and-donts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 1em 0;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
  .dos-and-donts {
    flex-direction: column;
  }
}

/* Common Card Styling (.dos and .donts) */
.dos,
.donts {
  flex: 1;
  min-width: 0;
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--md-table-border-color);
  border-block-start-width: 4px;
  border-radius: 6px;

  padding: 12px 0;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-block-end: 1em;
}

/* Remove bottom margin when inside the wrapper */
.dos-and-donts .dos,
.dos-and-donts .donts {
  margin-block-end: 0;
}

/* Accessible Hidden Title */
.dos h4,
.donts h4 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* List Styling */
.dos ul,
.donts ul {
  list-style: none;

  margin: 0 !important;
}

.dos li,
.donts li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-block-end: 18px;
  line-height: 1.4;
  min-block-size: round(up, 1.4em, 1px);
  color: var(--md-footer-fg-color);
}

.dos li:last-child,
.donts li:last-child {
  margin-block-end: 0;
}

/* Icons (Shared Base) */
.dos li:not(:empty)::before,
.donts li:not(:empty)::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-block-start: -1px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* "DO" Specifics */
.dos {
  border-block-start-color: var(--md-admonition-success-color);
}

.dos li:not(:empty)::before {
  background-color: var(--md-admonition-success-color);
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU2IDY0QzE1MC4xMyA2NCA2NCAxNTAuMTMgNjQgMjU2czg2LjEzIDE5MiAxOTIgMTkyIDE5Mi04Ni4xMyAxOTItMTkyUzM2MS44NyA2NCAyNTYgNjRabTEwOC40OSAxMzEuNzRMMjI3IDMzMy4yNGExMiAxMiAwIDAgMS0xNyAwbC02Mi41LTYyLjVhMTIgMTIgMCAwIDEgMTctMTdsNTQgNTQgMTI5LTEyOWExMiAxMiAwIDAgMSAxNyAxN1oiPjwvcGF0aD48L3N2Zz4=');
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU2IDY0QzE1MC4xMyA2NCA2NCAxNTAuMTMgNjQgMjU2czg2LjEzIDE5MiAxOTIgMTkyIDE5Mi04Ni4xMyAxOTItMTkyUzM2MS44NyA2NCAyNTYgNjRabTEwOC40OSAxMzEuNzRMMjI3IDMzMy4yNGExMiAxMiAwIDAgMS0xNyAwbC02Mi41LTYyLjVhMTIgMTIgMCAwIDEgMTctMTdsNTQgNTQgMTI5LTEyOWExMiAxMiAwIDAgMSAxNyAxN1oiPjwvcGF0aD48L3N2Zz4=');
}

/* "DON'T" Specifics */
.donts {
  border-block-start-color: var(--md-admonition-failure-color);
}

.donts li:not(:empty)::before {
  background-color: var(--md-admonition-failure-color);
  -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU2IDY0QzE1MC4xMyA2NCA2NCAxNTAuMTMgNjQgMjU2czg2LjEzIDE5MiAxOTIgMTkyIDE5Mi04Ni4xMyAxOTItMTkyUzM2MS44NyA2NCAyNTYgNjRabTEwNC40OSAyNzkuNTFhMTIgMTIgMCAwIDEtMTcgMTdMMjU2IDI3M2wtODcuNTEgODcuNTJhMTIgMTIgMCAwIDEtMTctMTdMMjM5IDI1NmwtODcuNTItODcuNTFhMTIgMTIgMCAwIDEgMTctMTdMMjU2IDIzOWw4Ny41MS04Ny41MmExMiAxMiAwIDAgMSAxNyAxN0wyNzMgMjU2WiI+PC9wYXRoPjwvc3ZnPg==');
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU2IDY0QzE1MC4xMyA2NCA2NCAxNTAuMTMgNjQgMjU2czg2LjEzIDE5MiAxOTIgMTkyIDE5Mi04Ni4xMyAxOTItMTkyUzM2MS44NyA2NCAyNTYgNjRabTEwNC40OSAyNzkuNTFhMTIgMTIgMCAwIDEtMTcgMTdMMjU2IDI3M2wtODcuNTEgODcuNTJhMTIgMTIgMCAwIDEtMTctMTdMMjM5IDI1NmwtODcuNTItODcuNTFhMTIgMTIgMCAwIDEgMTctMTdMMjU2IDIzOWw4Ny41MS04Ny41MmExMiAxMiAwIDAgMSAxNyAxN0wyNzMgMjU2WiI+PC9wYXRoPjwvc3ZnPg==');
}