.main_grid  {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 180px auto;
}

.title  {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: #8996a2;
}

.title h1  {
  position: relative;
  font-size: 2.5rem;
  font-weight: 500;
  padding: 1.5em 0em 1em 4.5em;
}

.title h1::after {
  content: "";
  position: absolute;
  left: 4.55em;
  height: 5px;
  width: 7.85em;
  bottom: 0.6em;
  background-color: #CC1F2F;
}

.content_box {
  grid-column: 1/2;
  grid-row: 2/3;
  margin: 6.2em 8.3em 4.8em 8.3em;
}

.content_box p {
  font-size: 1.3rem;
  margin: 0em 2em 1.9em 2em;
  line-height: 1.5;
}

.content_box a {
  text-decoration: none;
  color: #284156;
  font-weight: bold;
  position: relative;
}

.content_box a::after  {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  background: #284156;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 225ms ease-in;
}

.content_box a:hover::after  {
  transform: scaleX(1);
}


@media screen and (max-width: 1150px) {
  .main_grid h1  {
    padding: 1.5em 0em 1em 3em;
  }
  .main_grid h1::after {
    left: 3em;
  }
  .content_box {
    margin: 7em 5em 4.8em 5em;
  }
}

@media screen and (max-width: 885px) {
  .main_grid h1  {
    padding: 1.5em 0em 1em 1.8em;
  }
  .main_grid h1::after {
    left: 1.8em;
  }
  .content_box {
    margin: 6.2em 2em 4.8em 2em;
  }
}

@media screen and (max-width: 585px) {
  .main_grid h1  {
    padding: 1.5em 0em 1em 1.5em;
  }
  .main_grid h1::after {
    left: 1.5em;
  }
  .content_box {
    margin: 5em 1em 3em 1em;
  }
}

@media screen and (max-width: 540px) {
  .main_grid h1  {
    padding: 1.5em 0em 1em 0.8em;
  }
  .main_grid h1::after {
    left: 0.8em;
  }
  .content_box p {
    margin: 0em 0.8em 1.9em 0.8em;
  }
}

@media screen and (max-width: 390px) {
  .main_grid h1  {
    font-size: 2.34rem;
  }
}