#section-f .content-wrap {
  padding: 0 1.5em;
}

/**
 * Staggered Sections
 */

/* Section A & F */

#section-a, #section-f {
  background: #eaeaea;
  color: #333;
  padding-bottom: 2em;
}

.card-content {
  padding: 1.5em;
}

/* Section C */

#section-c {
  background: #fff;
  color: #333;
  padding: 2em;
}

/* Section D, G I / Boxes */

#section-d .box,
#section-g .box, #section-i .box  {
  padding: 2em 1em;
  color: #000;
  background-color: ##2E8B57;
}

#section-g .box p, #section-h .box p, #section-i .box p {
font-family: Arial, helvetica, sans-serif;
font-size: 16px;
line-height: 24px;
padding-top: 10px;
}

#section-d .box:first-child {
  /* background: #2690d4; */
}

/* Section E & H / Boxes */

#section-e .box,
#section-h .box {
  padding: 2em;
  color: #000;
}

#section-e .box:last-child {
  /* background: #2690d4; */
}

.grid img {
padding: 1.5em 1em !important;
}

.gapgrid {padding: 15px 0; height: 20px; background-color: #fff; color: #eaeaea; border: 0;}

.content-separB {width: 99%; margin: 10px auto; height: 4px; background-color: #3C638E; }

.content-wrap h1.content-title {
  font-weight: 700; 
  line-height: 10vw;
  font-size: 34px;
  color: #000000;
  text-transform: none;
  text-align:center;
}

h2.content-title {
  padding: 10px;
  margin: 0 auto;
  font-size: 22px;
}

h3.content-title {
  padding: 5px 0;
  margin: 0 auto;
  font-size: 20px;
}


.content-wrap h3 {
  padding: 10px 40px;
  margin: 0 auto;
 font-size: 18px;
}

.content-wrap .content-text p.intro,  .content-wrap .content-text p.conclus {
  padding: 10px 40px;
  margin: 0 auto;
  font-size: 17px;
}

.content-wrap .content-text p, .content-text h2, .content-text h3, .content-text ul, .content-text ol {
  padding: 10px 30px;
}

 .content-text ul li, .content-text ol li {
  position: relative;
}

.content-wrap .content-text p.intro strong {
  font-size: 20px;
}

.content-wrap p.p30 { 
  padding: 10px 30px;
}

.featured-image .post-thumbnail img {
    object-fit: contain;
    width: 100%;
    height: auto;
    /* margin: 0 auto; */
    max-height: 400px;
    padding: 15px;
    background-color: transparent;
    display: block;
}

/* Footer */

#main-footer {
  padding: 2em;
  background: #000;
  color: #fff;
  text-align: center;
}

#main-footer a {
  color: var(--footer-colour);
  text-decoration: none;
}

#d-left {
  min-height: 344px;
  background: no-repeat center url(https://www.caughtmyeye.dev/assets/images/surabaya/surabaya-car-free-day-bapak-penjual-topi-517w.webp);
}

#e-right {
  min-height: 344px;
  background: no-repeat center url(https://www.caughtmyeye.dev/assets/images/surabaya/surabaya-pasar-atom-800w.jpg);
}

#g-left {
  min-height: 344px;
  background: no-repeat center url(../img/diet/wimbledon-30958.webp);
}

#h-right {
  min-height: 344px;
  background: no-repeat center url(https://www.caughtmyeye.dev/assets/images/surabaya/surabaya-pasar-atom-800w.jpg);
}
#i-left {
  min-height: 344px;
  background: no-repeat center url(../img/diet/emma-canu.jpg);
}

#sec-right {
  min-height: 344px;
}
#sec-left {
  min-height: 344px;
}

/**
 * Note that we are using CSS Grid here.
 */

/* Media Queries */

@media (min-width: 700px) {
  .grid {
    display: grid;    
    grid-template-columns: 1fr repeat(2, minmax(auto, 25em)) 1fr;
  }

  #section-a .content-text,
  #section-f .content-text {
    columns: 2;
    column-gap: 2em;
  }

  #section-a .content-text p,
  #section-f .content-text p {
    padding-top: 0px;
    font-size: 17px;
    line-height: 24px;
  }

 .context-text p br {
  display: block;
  content: "";
  border-bottom: 10px solid transparent;
}

  .content-wrap {
    grid-column: 2/4;
  }

  .box,
  #main-footer div {
    grid-column: span 2;
  }

  /** 
   * Mobile First - The images are placed above the text by
   * default.
   * 
   * Only Re-order Columns for Larger Displays 
   *
   * These two lines of code is where the rubber meets the road.
   * This only affects the second row where we will put the text
   * on the left and the image on the right.
   */
  #section-h.grid div:nth-of-type(1) {
    order: 2; /* This is the image. Make it go to the right. */
  }
  #section-h.grid div:nth-of-type(2) {
    order: 1; /* This is the text. Make it go to the left. */
  }
}

@media screen and (max-width: 980px) {
#sec-left img, #sec-right img  {
    max-width: 360px; 
    height: auto;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .content-wrap h1.content-title {
     font-size: 24px;
    }
   .content-wrap p.intro,  .content-wrap p.conclus{
    padding: 10px 30px;
   }
  .content-text p {
    font-size: 16px;
    line-height: 22px;
   }
}


.cta-button {
  border: none;
  border-radius: 36px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  font-family: Helvetica, arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  padding:12px 16px;
  width: auto;
}

.cta-product_wrapper {width: 99%; margin: 20px auto;}
.button-cta {
  background-color: #B3282F;
  color: #fff !important;
}
.button-cta:hover {
  background-color: #6687BA;
}
.button-ctaB {
background-color: #ff9900;
color:#000000;
}
.button-ctaB:hover {
  background-color: #a39f9f;
  color: #fff;
}
.button-ctaC {
background-color: #0d8046;
color: #000;
}
.button-ctaC:hover {
  background-color: #a39f9f;
  color: #fff;
}
.button-ctaD {
background-color: #ff878c;
color: #3a3a3c;
}
.button-ctaD:hover {
  background-color: #a39f9f;
  color: #fff;
}
.button-ctaE {
background-color: #146eb4;
color: #3a3a3c;
}
.button-ctaE:hover {
  background-color: #a39f9f;
  color: #fff;
}

.button-ctaTW {
background-color: transparent;
color: #3a3a3c;
border: 1px solid #154177;
padding: 14px 20px;
}
.button-ctaTW:hover {
  color: #fff;
}
.button-ctaTW img {vertical-align: middle;}
 

/* ===============  https://codepen.io/marklchaves/pen/qBEWrWw  ================  */