index.css

/* !!!!!!!!!!!!!!!!!!!! */

/* START LAYOUT HELPERS */

/* This section is a mini "framework" using flexbox to let you build layouts of boxes!
See how it is used in the HTML. They key part are the .row and .item classes
Remember you can create box layouts within boxes
Also see how the media queries are used to change the size of boxes for different screen sizes */

/* !!!!!!!!!!!!!!!!!!!! */

#container {
  width: 100%;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.item {
  box-sizing: border-box;
  flex-grow: 0;
  flex-basis: 100%;

  border: 1px dotted orangered;
}

.content {
  flex-grow: 0;
  flex-basis: 100%;
  box-sizing: border-box;
  margin: 5px;
  padding: 10px;

  border: 1px dotted blueviolet;
}

.item.meta {
  flex-basis: 50%;
}

.item.cell {
  flex-basis: 25%;
}

/* adjustments for medium screens, like some tablets or landscape on a mobile */
@media (min-width: 576px) {
  .item {
    flex-basis: 50%;
  }
}

/* adjustments for medium-large screens, like some tablets */
@media (min-width: 768px) {
  .item {
    flex-basis: 33.3333333333333%;
  }
}

/* adjustments for large screens, like laptops and desktops */
@media (min-width: 992px) {
  #container {
    width: 992px;
    margin: 0 auto;
  }

  .item {
    flex-basis: 25%;
  }
}

/* !!!!!!!!!!!!!!!!!!!! */

/* END LAYOUT HELPERS */

/* !!!!!!!!!!!!!!!!!!!! */

body {
  background-color: #f5f5f5;
  color: #2d2c2c;
  font-family: Arial, Helvetica, sans-serif;
}

p {
  color: #494545;
}

.data-record {
  border: 1px solid blueviolet;
}

.data-record img {
  max-width: 100%;
}

.data-record table {
  width: 100%;
}

.data-record table td {
  width: 25%;
}

.data-record table thead td {
  border-bottom: 2px solid gray;
}

.data-record .item.data-title {
  flex-basis: 66.6666666666666667%;
}

.data-record .item.data-image {
  flex-basis: 33.33333333333333333%;
}