/*-------------------------------------------------
Start Header Section 
-------------------------------------------------*/
:root {
  --background-color: rgb(255, 255, 255);
  --color-black: rgb(36, 36, 36);
  --color-white: rgb(255, 255, 255);
  --site-color: rgb(195, 82, 20);
  --button-dark-background: rgb(43, 23, 0);
  --button-all-hover: rgb(172, 172, 172); /*include blockquote color also*/
  --gradient: linear-gradient(320deg, rgb(43, 23, 0) 0%, rgb(80, 76, 71) 50%, rgb(43, 23, 0) 100%);
  --section-border: rgb(235, 237, 242);
  --footer-background: rgb(235, 237, 242); /* Large list tab background (resource page) also*/
  --footer-color: rgb(65, 65, 65); /*NAV TOO */
  --resources__tab--hover-color: rgb(238, 140, 87);
  --resources__tab--initial-state-tab-color: rgb(105, 105, 105);
}

a {
  text-decoration: none;
}

.header__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 860px;
  grid-gap: 0px;
  align-items: center;
  background: url("../img/teacher/teach-helps-v2.webp") no-repeat top center / cover;
}

.header__left {
  padding: 150px 170px;
}

.header__right {
  color: var(--color-white);
}

@media (max-width: 950px) {
  .header__grid {
    grid-template-rows: auto;
  }

  .header__right {
    display: none;
  }

  .header__grid {
    grid-template-columns: 1fr !important;
    background: url("../img/teacher/teach-helps-v.webp") no-repeat center center / cover;
  }

  .header__left {
    padding: 80px 30px;
  }
}

/*-------------------------------------------------
-------------- Start Sub-Header Section -----------
-------------------------------------------------*/

.sub-header__grid {
  display: grid;
  grid-template-columns: 5fr 5fr 3fr;
  grid-gap: 99px;
  align-items: center;
  padding: 80px 40px;
  background: var(--gradient);
}
/* background: linear-gradient(320deg, rgb(59, 59, 59) 0%, rgb(78, 78, 78) 50%, rgb(0, 0, 0) 100%); */

.sub-header-img--max {
  max-width: 500px;
}

@media (max-width: 1200px) {
  .sub-header__grid {
    grid-template-columns: 1fr 1fr;
    padding: 80px 40px;
  }
}

@media (max-width: 786px) {
  .sub-header__grid {
    grid-template-columns: 1fr;
    padding: 80px 30px;
  }
}

/*-------------------------------------------------
  -----------------WHITE BACKGROUND ---------------
  -------The Way of Discipleship Section ----------
-------------------------------------------------*/

.way2__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: wrap;
  grid-template-rows: 860px;
  grid-gap: 0px;
  align-items: center;
}

.way2__left {
  padding: 150px 90px;
  /* background: url("../img/teacher/section.jpg") no-repeat center center / cover; */
}

@media (max-width: 1100px) {
  .way2__grid {
    grid-template-rows: auto;
  }

  .way2__grid {
    grid-template-columns: 1fr;
    /* background: url("../img/teacher/section-book-v.jpg") no-repeat center center / cover; */
  }

  .way2__right__img--max {
    max-width: 680px;
  }

  .way2__right {
    margin: auto;
    padding-bottom: 75px;
  }
}

@media (max-width: 768px) {
  .way2__left {
    padding: 50px 30px;
    /* background: url("../img/teacher/section.jpg") no-repeat center center / cover; */
  }

  .way2__right {
    padding: 30px 30px 60px 30px;
    /* background: url("../img/teacher/section.jpg") no-repeat center center / cover; */
  }
}

/*-------------------------------------------------
------------------- MBS Section -------------------
-------------------------------------------------*/

.mbs__section--background {
  background: var(--gradient);
}

.mbs-grid-img--max {
  max-width: 180px;
}

.mbs__champ-text {
  font-size: clamp(1rem, 1.4rem, 1.6rem);
}

.mbs__grid-v2 {
  margin: auto;
  max-width: 1450px;
  display: grid;
  align-items: center;
  grid-gap: 75px;
  padding: 100px 10px 100px 30px;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(2, auto);
  grid-template-areas: "1 2 3";
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box3 {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
}

@media (max-width: 1280px) {
  .mbs-grid-img--max {
    max-width: 400px;
  }
  .mbs__grid-v2 {
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
      "1 3"
      "2 3";
  }

  .box1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .box2 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  }

  .box3 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }
}

@media (max-width: 825px) {
  .mbs-grid-img--max {
    max-width: 250px;
  }
  .mbs__grid-v2 {
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    grid-template-areas:
      "1 1"
      "2 3";
  }

  .box1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .box2 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .box3 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
}

@media (max-width: 580px) {
  .mbs-grid-img--max {
    max-width: 350px;
    padding-left: 60px;
  }
  .mbs__grid-v2 {
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
      "2"
      "1"
      "3";
  }

  .box1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .box2 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .box3 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
  }
}

/*-------------------------------------------------
------Spiritual Discipline Resources Section-------
-------------------------------------------------*/

.spiritual {
  background-color: var(--site-color);
  padding: 55px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.spiritual__border {
  border: 2px solid var(--section-border);
  border-radius: 16px;
  padding: 55px;
}

.spiritual__flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}

/* No idea what this needs to be on the div not in the flexbox!!! But there it is. */
.spiritual__flex > div {
  margin: 10px;
}

@media (max-width: 786px) {
  .spiritual__border {
    border: none;
    text-align: left;
    padding: 0px;
  }

  .spiritual {
    padding: 55px 30px;
  }

  .spiritual__flex {
    justify-content: start;
    padding: 60px 30px;
  }
}