/* Styles */
/* -------------------------------------------------------------------------- */

body {
  margin: 10px;
}

.container {
  border-width: 1px;
  border-color: brown;
  border-style: solid;
  border-radius: 8px;
}

.item {
  min-width: 100px;
  padding: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
  border-radius: 8px;
}

.item:nth-child(odd) {
  background-color: cadetblue;
}

.item:nth-child(even) {
  background-color: coral;
}

/* Flex container */
/* -------------------------------------------------------------------------- */

.container {
  display: flex;

  /* flex-direction: column-reverse; */

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: flex-start;
}

.container {
  height: 170px;
}

/* Flex items */
/* -------------------------------------------------------------------------- */

.item {
  flex-grow: 1;
}

.item:nth-child(1),
.item:nth-child(5) {
  flex-basis: 100%;
}

.item:not(:first-child):not(:nth-child(4)):not(:last-child) {
  margin-right: 10px;
}