/* *************************************************************
  * These styles help creating a table layout using div tags
  
  Div Table Styles:
    .div-table: main container of the div-table
    .thead: equivalent of the header section of the table
    .tbody: equivalent of the body section of the table
    .tr: row in tbody
    .th: table header's column
    .td: table body's column

  Sample structure
    <div.div-table>
      <div.thead>
        <div.th></div>
        <div.th></div>
      </div>
      <div.tbody>
        <div.tr>
          <div.td></div>
          <div.td></div>
        </div>
        <div.tr>
          <div.td></div>
          <div.td></div>
        </div>
      </div>
    </div>
************************************************************** */
.div-table {
  margin: 25px 15px;
}

.div-table * {
  display: flex;
  margin: 0;
  place-content: center;
}

.div-table, 
.div-table .tbody {
  flex-flow: column;
}

.div-table .thead {
  flex-flow: row;
}

.div-table .tr {
  flex-flow: row;
  gap: 1em;
}

.div-table .thead > *,
.div-table .tr > * {
  flex: 1;
}
.div-table .thead > *.sm,
.div-table .tr > *.sm {
  flex: 0.2;
}
.div-table .thead > *.lg,
.div-table .tr > *.lg {
  flex: 1.2;
}

.div-table .th, 
.div-table .td {
  align-items: center;
}

@media screen and (min-width: 1200px) {
  .div-table .thead > *.sm,
  .div-table .tr > *.sm {
    flex: 0.5;
  }
  .div-table .thead > *.lg,
  .div-table .tr > *.lg {
    flex: 1.5;
  }
}

/* ****************************************** */