h4 {
  margin: 0.5rem 0;
  color: #0f3266;
}

.gridcontainer {
  /* display: grid; */
  max-width: min(90%, 70rem);
  column-gap: 5px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 8rem 15rem;
  justify-items: start;
  margin: 20px auto;
}

.title {
  text-align: left;
}

.box {
  padding: 20px;
  align-self: center;
  justify-content: center;
  font-size: 1rem;
}

.a {
  grid-column: 1 / 3;
  grid-row: 1;
  width: 70%;
  font-size: 1.5rem;
  color: #0f3266;
  align-self: end;
  margin-left: 16px;
}

.b {
  padding-right: 0px;
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}

.b > img {
  width: 100%;
  max-width: 32rem;
}

.c {
  grid-column: 1 / 3;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
}

.subbox {
  margin: 0 1rem;
}

.box > .subbox > h3 {
  color: #0f3266;
}

@media (max-width: 1080px) {
  .gridcontainer {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
  }

  .a {
    grid-row: 1;
    grid-column: 1;
  }

  .b {
    grid-row: 3;
    grid-column: 1;
  }

  .c {
    grid-column: 1;
    grid-row: 2;
  }
}