/* ############ 7. Problem ############ */
section.problem {
  padding: 1rem;
  margin: auto;
}

.problem h1 {
  margin-left: 1rem;
  color: #35b1e8;
}

.problem h1 ~ p {
  border-left: solid 1px #dedede;
  padding-left: 1rem;
}

.problem h3 {
  margin: 1rem 0 0 1rem;
  color: #223055;
}

.problem ul {
  margin: 0 0 1rem 3rem;
}

.problem img {
  margin: auto;
  display: block;
}

/* ############ 7a. Problem > Action ############ */


/* ############ 8. Gallery ############ */


/* ######### 9. Footer ######### */

/* ######### 9a. Footer > Contact ######### */

/* ######### 9b. Footer > Connect ######### */


/* ############ 10. Media Queries ############ */

/* ############ 10a. Media Query, (min-width: 700px) ############ */
@media screen and (min-width: 700px) {
  /* ######### 10a-i. HERO, Large screen rules ######### */

  /* ######### 10a-vi. Problem, Large screen rules ######### */

  section.problem {
    background: url(../images/background-pattern3-faded.png) no-repeat center left; /*hero.svg*/
    max-width: 1200px;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	align-items:center;
  }

  .problem h1 {
    color: #233458;
    padding-right: 1rem;
    text-align: right;
    text-shadow: 1px 1px 2px #fff;
	grid-column: 1 / 5;
  }

  .problem h1 ~ p, .problem h3, .problem ul {
	  grid-column: 5 / -1;
  }

  .problem ul {
    margin-left: 2rem;
    padding-right: 1rem;
  }

  .problem img {
    display: none;
  }


}

/* ############ 10b. Media Query, (min-width: 1000px) ############ */
@media screen and (min-width: 1000px) {

}