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

.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.5em;
  height: 5px;
  width: 2.3em;
  bottom: 0.6em;
  background-color: #CC1F2F;
}

.main {
  grid-column: 1/2;
  grid-row: 2/3;
  display: inline-grid;
  grid-template-columns: auto 400px;
  grid-auto-rows: auto;
  margin-bottom: 80px;
}

.content  {
  grid-column: 1/2;
  grid-row: 1/2;
  display: flex;
  align-items: center;
}

.text {
  width: 600px;
  font-size: 1.3rem;
  margin: 0em auto 1em 12em;
  line-height: 1.8;
  position: relative;
}

.text::before  {
  content: "";
  position: absolute;
  top: -2.5em;
  width: 200px;
  height: 6px;
  background-color: #CC1F2F;
}

.text::after {
  content: "";
  position: absolute;
  bottom: 2.2em;
  left: -5.5em;
  width: 100px;
  height: 6px;
  background-color: #CC1F2F;
  transform: rotate(90deg);
}

.image_container {
  grid-column: 2/3;
  grid-row: 1/2;
  height: 400px;
}

.image_container img {
  height: 100%;
}

@media screen and (max-width: 1260px) {
  .text {
    margin: 0em auto 1em 7em;
  }
}

@media screen and (max-width: 1150px) {
  .main_grid h1  {
    padding: 1.5em 0em 1em 3em;
  }
  .main_grid h1::after {
    left: 3em;
  }
  .main {
    display: flex;
    flex-direction: column;
  }
  .text {
    margin: 3em auto 5em 9.3em;
  }
  .image_container  {
    height: auto;
    display: flex;
    justify-content: center;
  }
  .image_container img  {
    width: 75%;
  }
}

@media screen and (max-width: 885px) {
  .main_grid h1  {
    padding: 1.5em 0em 1em 1.8em;
  }
  .main_grid h1::after {
    left: 1.8em;
  }
  .text {
    margin: 3em auto 5em 7.2em;
  }
  .image_container img  {
    width: 82%;
  }
}

@media screen and (max-width: 770px) {
  .text {
    width: auto;
    margin: 3em 3.5em 5em 7.2em;
  }
}

@media screen and (max-width: 690px) {
  .text {
    margin: 3em 3.5em 5em 3.5em;
  }
  .text::before  {
    width: 100px;
  }
  .text::after {
    display: none;
  }
}

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

@media screen and (max-width: 540px) {
  .main_grid h1  {
    padding: 1.5em 0em 1em 0.8em;
  }
  .main_grid h1::after {
    left: 0.8em;
  }
  .text {
    margin: 3em 1.9em 4em 1.9em;
  }
  .image_container img  {
    width: 85%;
  }
}

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