/* ------
Hero section
--------*/

.hero {
  background: url("../img/background_rm.png");
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

.hero h1, .hero h2 {
  color: #4A4A4A;
}

.hero h2 {
  width: 50%;
}

.blue {
  background-color: #00529F;
  color: #fff;
}


/* ------
Overview section
--------*/

.overview {
  grid-template-areas:
  ". role role role role role role ."
  ". . overview_intro overview_intro overview_intro overview_intro . ."
}

.img_problem {
  align-items: center;
}

/* ------
Research section
--------*/

.research {
  grid-template-areas:
  ". . research_intro research_intro research_intro research_intro . ."
  ". competitive_desc competitive_desc competitive_desc competitive_desc competitive_desc . ."
  "competitive_block competitive_block competitive_block competitive_block competitive_block competitive_block competitive_block competitive_block"
  ". survey_desc survey_desc survey_desc survey_desc survey_desc . ."
  "survey_insight survey_insight survey_insight survey_insight survey_insight survey_insight survey_insight survey_insight"
}

.survey_block img {
  width: 100%;
}

.competitive_block img {
  width: 100%;
}


/* ------
Info Architecture section
--------*/

.info_architecture {
    display: grid;
    grid-area: info_architecture;
    grid-template-areas:
    ". . info_architecture_intro info_architecture_intro info_architecture_intro info_architecture_intro . ."
    ". user_story user_story user_story user_story_img user_story_img user_story_img ."
    ". content_strategy content_strategy content_strategy content_strategy content_strategy content_strategy ."
    "img_content_strategy img_content_strategy img_content_strategy img_content_strategy img_content_strategy img_content_strategy img_content_strategy img_content_strategy"
    ". content_strategy_2 content_strategy_2 content_strategy_2 content_strategy_2 content_strategy_2 content_strategy_2 ."
    ". . conclusion conclusion conclusion conclusion . ."
}

.conclusion {
  padding-bottom: 0;
}

.wireframes {
  padding-top: 10rem;
  padding-bottom: 10rem;
  background: #30323E;
  display: grid; /* This grid setting is because this div is very large. It may or may not be in general */
  grid-area: wireframes;
  grid-template-columns: 1fr 4fr 6fr 1fr;
  grid-column-gap: 2rem;
  grid-row-gap: 10rem;
  grid-template-areas:
  ". wireframes_desc wireframes_block ."
}

.wireframes p, .wireframes h2 {
  color: #fff;
}

.wireframes_desc {
  align-self: center;
}

.wireframes_block img {
  width: 100%;
}


/* ------
Visual Design section
--------*/

.visuals {
  grid-area: visuals;
  grid-template-areas:
  ". . visuals_intro visuals_intro visuals_intro visuals_intro . ."
  ". hifi hifi hifi hifi hifi hifi ."
  ". hifi_flow hifi_flow hifi_flow hifi_flow hifi_flow_img hifi_flow_img ."
  ". hifi_2 hifi_2 hifi_2 hifi_2 hifi_2 hifi_2 ."
}

.hifi_flow {
  align-self: center;
}

.img_hifi {
  margin: 0;
}


/* ------
Results section
--------*/

.results {
  grid-template-areas:
  ". kpis kpis img_kpis ."
}

.img_kpis img {
  width: 100%;
}


/* ------
Prototype section
--------*/

.prototype {
  background: url('../img/background_pausa.png');
}

/* -----------
See More
-------------*/

.more_project_1 {
  background-image: url("../img/background_more_pausa_signup.png");
  background-size: cover;
  display: flex;
}

.more_project_1 img {
  width: 20rem;
}

.more_project_2 {
  background-image: url("../img/background_more_animaedu.png");
  background-size: cover;
}



@media screen and (max-width: 575px){

/* ------
Hero section
--------*/

.hero h2 {
  width: 100%;
}

/* ------
Overview sections
--------*/

.overview {
  grid-template-areas:
  ". role ."
  ". overview_intro ."
}

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

/* ------
Research section
--------*/

.research {
  grid-template-areas:
  ". research_intro ."
  ". competitive_desc ."
  "competitive_block competitive_block competitive_block"
  ". survey_desc ."
  "survey_insight survey_insight survey_insight"
}


/* ------
Info Architecture section
--------*/

.info_architecture {
    display: grid;
    grid-area: info_architecture;
    grid-template-areas:
    ". info_architecture_intro ."
    ". user_story ."
    "user_story_img user_story_img user_story_img"
    ". content_strategy ."
    "img_content_strategy img_content_strategy img_content_strategy"
    ". content_strategy_2 ."
    ". conclusion ."
}

/* -----------
See More
-------------*/

.more_project_1 {
  background-image: url("../img/background_more_pausa_signup.png");
  background-size: cover;
  display: flex;
}

.more_project_1 img {
  width: 20rem;
}

.more_project_2 {
  background-image: url("../img/background_more_animaedu.png");
  background-size: cover;
}

}


/* ----
CSS for Tablet
-----
*/
@media (min-width: 575px) and (max-width: 979px) {


/* ------
Hero section
--------*/

.hero {
background-image: url("../img/background_rm_mobile.png");
background-size: cover;
}


/* ------
Overview sections
--------*/


  .overview {
    grid-template-areas:
    ". role role role role ."
    ". overview_intro overview_intro overview_intro overview_intro ."
  }


  /* ------
  Research section
  --------*/

  .research {
    grid-template-areas:
    ". research_intro ."
    ". competitive_desc ."
    "competitive_block competitive_block competitive_block"
    ". survey_desc ."
    "survey_insight survey_insight survey_insight"
  }

  .research {
    grid-template-areas:
    ". research_intro research_intro research_intro research_intro ."
    ". competitive_desc competitive_desc competitive_desc competitive_desc ."
    "competitive_block competitive_block competitive_block competitive_block competitive_block competitive_block"
    ". survey_desc survey_desc survey_desc survey_desc ."
    "survey_insight survey_insight survey_insight survey_insight survey_insight survey_insight"
  }


  /* ------
  Info Architecture section
  --------*/

  .info_architecture {
      display: grid;
      grid-area: info_architecture;
      grid-template-areas:
      ". info_architecture_intro ."
      ". user_story ."
      "user_story_img user_story_img user_story_img"
      ". content_strategy ."
      "img_content_strategy img_content_strategy img_content_strategy"
      ". content_strategy_2 ."
      ". conclusion ."
  }

  .info_architecture {
      background-color: #fff;
      grid-area: info_architecture;
      grid-template-areas:
      ". info_architecture_intro info_architecture_intro info_architecture_intro info_architecture_intro ."
      ". user_story user_story user_story . ."
      "user_story_img user_story_img user_story_img user_story_img user_story_img user_story_img"
      ". content_strategy content_strategy content_strategy content_strategy ."
      "img_content_strategy img_content_strategy img_content_strategy img_content_strategy img_content_strategy img_content_strategy"
      ". content_strategy_2 content_strategy_2 content_strategy_2 content_strategy_2 ."
      ". conclusion conclusion conclusion conclusion ."
  }

  /* -----------
  See More
  -------------*/

  .more_project_1 {
    background-image: url("../img/background_more_pausa_signup.png");
    background-size: cover;
    display: flex;
  }

  .more_project_1 img {
    width: 20rem;
  }

  .more_project_2 {
    background-image: url("../img/background_more_animaedu.png");
    background-size: cover;
  }

}