/*==========================*
 * Styles for display boxes *
 *==========================*/

/* NOTE:
 * Placed boxes in .container divs so to
 * fix iOS flexbox height rendering issues
 */
.box {
  margin: 2rem;
  padding: 1rem;

  width: 640px;
  max-width: calc(100vw - 6rem);

  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;

  border: dashed 2px var(--white);
  box-sizing: border-box;
}

.box.red {
  border-color: var(--red);
}

.box.green {
  border-color: var(--green);
}

.box.blue {
  border-color: var(--blue);
}

.box > .logo {
  width: 128px;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.box img {
  width: 128px;
  height: 128px;
  object-fit: contain;
}

.box bar {
  align-self: stretch;
  box-sizing: border-box;
  margin: 0 1.5ch;
  border-left: dashed 2px var(--white);
}

.box.red bar {
  border-color: var(--red);
}

.box.blue bar {
  border-color: var(--blue);
}

.box.blue img {
  height: 256px;
  width: 256px;
}

.box.blue .work {
  text-align: center;
  width: 256px;
}

.info {
  width: 640px;
  max-width: calc(100vw - 6rem);
  margin-bottom: 1rem;
}

.box .info {
  flex-grow: 1;
  align-self: stretch;
  margin: 0;
  max-width: 100%;
}

.info > .header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  font-style: italic;
}

.info > .header > .label {
  margin-right: 1ch;
}

.info > .header > .date {
  color: var(--lgrey);
}

.info > .description {
  margin-top: 1rem;
  color: var(--lgrey);
}

@media only screen and (max-width: 600px) {
  .box {
    flex-flow: column nowrap;
  }

  .box.red .logo {
    width: 100%;
    height: 128px;
    margin-bottom: 1rem;
    flex-grow: 0;
  }

  .box bar {
    display: none;
  }
}

@media only screen and (max-width: 766px) {
  .box.blue {
    flex-flow: column nowrap;
  }

  .box.blue bar {
    display: none;
  }

  .box.blue .work {
    width: 100%;
    margin-bottom: 1rem;
  }

  .box.blue .work img {
    height: auto;
    max-width: 100%;
  }

  .box.blue .work a {
    display: block;
    height: auto;
  }
}