@value large-tablet-breakpoint-query from '~diem-docusaurus-components/src/variables.module.css';
@value mobile-breakpoint-max-query from '~diem-docusaurus-components/src/variables.module.css';
@value medium-tablet-breakpoint-max-query from '~diem-docusaurus-components/src/variables.module.css';
@value small-tablet-breakpoint-max-query from '~diem-docusaurus-components/src/variables.module.css';

.root {
  --horizontal-spacing: 15px;
  display: flex;
  flex-wrap: wrap;
}

.root > * {
  margin-right: var(--horizontal-spacing);
  margin-bottom: 15px;
}

.justify {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  display: grid;
  column-gap: 2rem !important;
  --doc-card-size: 100% !important;
  width:100% !important;
}

.root.rowOf2 {
  --grid-column-spacing: 10px;
  --doc-card-size: calc( 100% - var(--grid-column-spacing) );
  display: grid;
  grid-column-gap: var(--grid-column-spacing);
  grid-template-columns: 50% 50%;
  width: 100%;
}

.root.rowOf3 {
  --doc-card-size: var(--doc-card-3-per-row);
}

.root.rowOf4 {
  --doc-card-size: var(--doc-card-4-per-row);
}

@media medium-tablet-breakpoint-max-query {
  .justify {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media small-tablet-breakpoint-max-query {
  .justify {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

@media mobile-breakpoint-max-query {
  .root.rowOf2 {
    grid-template-columns: 100%;
  }
}

@media large-tablet-breakpoint-query {
  .root {
    /* Account for the margin of the final card on a line */
    width: calc(100% + calc( var(--horizontal-spacing) * 2 ));
  }
}
