.main_grid  {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 590px auto;
  grid-row-gap: 65px;
  margin-bottom: 110px;
}

.intro  {
  grid-column: 1/2;
  grid-row: 1/2;
  display: inline-grid;
  grid-template-columns: 30% 30% 40%;
  grid-template-rows: 40% 60%;
  background-color: #8996a2;
}

.intro_header {
  grid-column: 1/3;
  grid-row: 1/2;
  position: relative;
  color: #3b5265;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 1.8em 0em 0em 2.5em;
}

.intro_header::after  {
  content: "";
  position: absolute;
  left: 2.5em;
  margin-top: 2.5em;
  width: 35%;
  height: 6px;
  background-color: #CC1F2F;
}

.intro p  {
  grid-column: 2/4;
  grid-row: 2/3;
  padding: 0.7em 7em 2em 2em;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.9;
}

.sec_01 {
  grid-column: 1/2;
  grid-row: 2/3;
  display: inline-grid;
  grid-template-columns: 13% 74% 13%;
  grid-auto-rows: 2fr auto;
  padding: 1em 7.5em 5em 7.5em;
}

.header {
  grid-column: 1/3;
  grid-row: 1/2;
  line-height: 1.1;
  color: #CC1F2F;
  font-size: 6rem;
  font-weight: 500;
  position: relative;
  opacity: 0;
  transform: translateY(60px);
  transition: 0.5s all ease-in-out;
}

.header_appear {
  opacity: 1;
  transform: translateY(0px);
}

.header::after  {
  content: "";
  position: absolute;
  margin-top: 0.5em;
  margin-left: 0.45em;
  width: 150px;
  height: 6px;
  background-color: #CC1F2F;
}

.header::before  {
  content: "";
  position: absolute;
  top: 2.25em;
  left: -0.2em;
  width: 130px;
  height: 6px;
  background-color: #CC1F2F;
  transform: rotate(90deg);
}

.content  {
  grid-column: 2/3;
  grid-row: 2/3;
  font-size: 1.3rem;
  line-height: 1.4;
  padding-top: 2.5em;
  opacity: 0;
  transform: translateX(30px);
  transition: 0.5s all ease-in-out;
}

.content_appear {
  opacity: 1;
  transform: translateX(0px);
}

.image_container {
  grid-column: 1/2;
  grid-row: 3/4;
  display: flex;
  justify-content: center;
  height: 400px;
}

.image_container img {
  height: 100%;
}

@media screen and (max-width: 1300px) {
  .intro p  {
    padding: 0.7em 5.5em 2em 2em;
  }
  .sec_01 {
    grid-template-columns: 15% 78% 7%;
  }
  .header::before  {
    top: 2.25em;
  }
  .content  {
    transform: translateY(30px);
  }
  .content_appear {
    transform: translateY(0px);
  }
}

@media screen and (max-width: 1200px) {
  .main_grid  {
    grid-template-rows: 605px auto;
  }
  .intro  {
    grid-template-rows: 39% 61%;
  }
  .intro_header {
    padding: 1.8em 0em 0em 2.2em;
  }
  .intro_header::after  {
    left: 2.2em;
  }
  .intro p  {
    padding: 0.7em 4em 2em 2em;
  }
  .sec_01 {
    grid-template-columns: 15% 85% 0%;
    padding: 1em 7.5em 3em 7.5em;
  }
  .header::before  {
    top: 2.4em;
  }
}

@media screen and (max-width: 1140px) {
  .main_grid  {
    grid-template-rows: 615px auto;
  }
  .intro  {
    grid-template-columns: 30% 40% 30%;
    grid-template-rows: 36% 64%;
  }
  .intro_header::after  {
    margin-top: 2.3em;
    width: 25%;
  }
  .intro p  {
    padding: 1em 4em 2em 2em;
  }
  .sec_01 {
    grid-template-columns: 16% 84% 0%;
  }
}

@media screen and (max-width: 1040px) {
  .intro  {
    grid-template-rows: 47% 53%;
  }
  .intro_header {
    grid-column: 1/4;
    padding: 1.5em 2.2em 0em 2.2em;
  }
  .intro_header::after  {
    width: 23%;
    height: 5px;
  }
  .intro p  {
    grid-column: 1/4;
    padding: 0.55em 4em 2em 4.7em;
  }
  .sec_01 {
    padding: 1em 6em 3em 6em;
  }
  .image_container  {
    height: auto;
  }
  .image_container img  {
    width: 80%;
  }
}

@media screen and (max-width: 940px) {
  .intro_header {
    padding: 1.5em 1.45em 0em 1.45em;
  }
  .intro_header::after  {
    left: 1.45em;
  }
  .intro p  {
    padding: 0.7em 3em 2em 3em;
  }
  .sec_01 {
    padding: 1em 4.5em 3em 4.5em;
  }
  .header {
    font-size: 5.7rem;
  }
  .header::before  {
    display: none;
  }
  .header::after  {
    margin-top: 0.55em;
    margin-left: 0.35em;
    width: 250px;
  }
  .content  {
    grid-column: 1/3;
    padding-top: 1.8em;
  }
  .image_container img  {
    width: 84%;
  }
}

@media screen and (max-width: 840px) {
  .main_grid  {
    grid-template-rows: 655px auto;
    margin-bottom: 90px;
  }
  .intro  {
    grid-template-rows: 46% 54%;
  }
  .header {
    font-size: 5.45rem;
  }
  .intro_header::after  {
    width: 27%;
  }
  .intro p  {
    padding: 0em 3em 2em 3em;
  }
}

@media screen and (max-width: 740px) {
  .main_grid  {
    grid-template-rows: auto auto;
  }
  .intro  {
    display: flex;
    flex-direction: column;
  }
  .intro_header {
    padding: 1.2em 1.45em 0em 1.45em;
  }
  .intro_header::after  {
    margin-top: 2.2em;
  }
  .intro p  {
    padding: 3.8em 3em 2.3em 3em;
  }
  .sec_01 {
    padding: 1em 4em 2em 4em;
  }
  .header {
    font-size: 4.71rem;
  }
}

@media screen and (max-width: 640px) {
  .main_grid  {
    margin-bottom: 85px;
  }
  .intro_header {
    padding: 1.2em 1em 0em 1em;
  }
  .intro_header::after  {
    left: 1em;
  }
  .intro p  {
    padding: 3.8em 2.2em 2.3em 2.2em;
  }
  .sec_01 {
    padding: 0.8em 3em 1.5em 3em;
  }
  .header {
    font-size: 4.15rem;
  }
  .header::after  {
    width: 200px;
  }
  .image_container img  {
    width: 85%;
  }
}

@media screen and (max-width: 540px) {
  .intro_header {
    font-size: 2.8rem;
    padding: 1.2em 0.68em 0em 0.68em;
  }
  .intro_header::after  {
    left: 0.68em;
    width: 35%;
  }
  .intro p  {
    font-size: 1.3rem;
    padding: 3.8em 1.5em 2.3em 1.5em;
  }
  .sec_01 {
    padding: 0em 2.1em 1em 2.1em;
  }
  .image_container img  {
    width: 87%;
  }
}

@media screen and (max-width: 490px) {
  .intro_header {
    font-size: 2.6rem;
  }
  .header {
    font-size: 3.7rem;
  }
}

@media screen and (max-width: 445px) {
  .intro_header {
    font-size: 2.5rem;
  }
  .header {
    font-size: 3.6rem;
  }
  .header::after  {
    width: 150px;
  }
}

@media screen and (max-width: 414px) {
  .header {
    font-size: 3.5rem;
  }
  .header::after  {
    width: 135px;
  }
}