/* =========================================================
THE CHALLENGE
------------------------------------------------------------
Jerarquía:
- Encabezado principal: 48px
- Subtítulo: 30px
- Contenido: 16px
========================================================= */


/* =========================================================
SECTION
========================================================= */

.challenge-block{
  background:#ffffff;
  padding:96px 0 110px;
}


/* =========================================================
CONTAINER
========================================================= */

.challenge-inner{
  width:100%;
  max-width:1120px;

  margin:0 auto;

  padding-left:40px;
  padding-right:40px;
}


/* =========================================================
ENCABEZADO PRINCIPAL
THE CHALLENGE
========================================================= */

.challenge-eyebrow{
  margin:0 0 18px;

  font-family:'Cormorant Garamond', serif;
  font-size:48px;
  line-height:1.1;
  font-weight:500;

  letter-spacing:-0.4px;
  text-transform:none;

  color:#0b2239;
}


/* =========================================================
SUBTÍTULO
ORGANIZATIONS RARELY FAIL...
========================================================= */

.challenge-title{
  max-width:1000px;

  margin:0 0 30px;

  font-family:'Cormorant Garamond', serif;
  font-size:30px;
  line-height:1.3;
  font-weight:500;

  letter-spacing:-0.2px;

  color:#0b2239;
}


/* =========================================================
INTRODUCTION
========================================================= */

.challenge-intro{
  max-width:900px;

  margin:0;

  font-family:'Manrope', sans-serif;
  font-size:16px;
  line-height:1.75;

  color:#3a4b5c;
}


/* =========================================================
CHALLENGE LIST
------------------------------------------------------------
Executive observations
========================================================= */

.challenge-list{
  width:100%;
  max-width:100%;

  margin:46px 0 42px;
  padding:0;

  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:70px;

  list-style:none;

  border-top:1px solid rgba(11,34,57,.10);
}


/* =========================================================
LIST ITEMS
========================================================= */

.challenge-list li{
  position:relative;

  min-height:64px;

  display:flex;
  align-items:center;

  padding:17px 12px 17px 27px;

  border-bottom:1px solid rgba(11,34,57,.10);

  font-family:'Manrope', sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.55;

  color:#243a4f;
}


/* editorial marker */

.challenge-list li::before{
  content:"";

  position:absolute;

  left:0;
  top:50%;

  width:9px;
  height:1px;

  background:#7d97ae;

  transform:translateY(-50%);
}


/* =========================================================
TEXT AFTER LIST
========================================================= */

.challenge-text{
  max-width:720px;

  margin:0;

  font-family:'Manrope', sans-serif;
  font-size:16px;
  line-height:1.75;

  color:#3a4b5c;
}


/* =========================================================
CLOSING STATEMENT
========================================================= */

.challenge-closing{
  position:relative;

  max-width:720px;

  margin:36px 0 0;
  padding:0 0 0 24px;

  font-family:'Cormorant Garamond', serif;
  font-size:27px;
  line-height:1.3;
  font-weight:500;

  letter-spacing:-0.15px;

  color:#0b2239;
}


.challenge-closing::before{
  content:"";

  position:absolute;

  left:0;
  top:.68em;

  width:11px;
  height:1px;

  background:#7d97ae;
}


/* =========================================================
DESKTOP GRANDE
========================================================= */

@media (min-width:1600px){

  .challenge-inner{
    max-width:1180px;
  }

}


/* =========================================================
LAPTOP
<= 1200px
========================================================= */

@media (max-width:1200px){

  .challenge-inner{
    max-width:960px;
  }

}


/* =========================================================
TABLET LANDSCAPE
<= 1024px
========================================================= */

@media (max-width:1024px){

  .challenge-block{
    padding:82px 0 92px;
  }


  .challenge-inner{
    max-width:860px;
  }


  .challenge-eyebrow{
    font-size:42px;
  }


  .challenge-title{
    max-width:760px;

    font-size:28px;
  }


  .challenge-list{
    column-gap:50px;
  }

}


/* =========================================================
TABLET
<= 900px
========================================================= */

@media (max-width:900px){

  .challenge-block{
    padding:72px 0 82px;
  }


  .challenge-inner{
    max-width:650px;
  }


  .challenge-eyebrow{
    margin-bottom:16px;

    font-size:40px;
    line-height:1.1;
  }


  .challenge-title{
    max-width:620px;

    margin-bottom:26px;

    font-size:27px;
    line-height:1.3;
  }


  .challenge-intro,
  .challenge-text{
    max-width:600px;
  }


  .challenge-list{
    max-width:620px;

    margin:38px 0 36px;

    grid-template-columns:1fr;
    column-gap:0;
  }


  .challenge-list li{
    min-height:auto;

    padding:15px 10px 15px 25px;
  }


  .challenge-closing{
    max-width:600px;

    font-size:25px;
  }

}


/* =========================================================
MOBILE
<= 600px
========================================================= */

@media (max-width:600px){

  .challenge-block{
    padding:62px 0 70px;
  }


  .challenge-inner{
    width:100%;
  }


  .challenge-eyebrow{
    margin-bottom:16px;

    font-size:34px;
    line-height:1.1;

    letter-spacing:-0.3px;
  }


  .challenge-title{
    max-width:100%;

    margin-bottom:24px;

    font-size:24px;
    line-height:1.3;

    letter-spacing:-0.15px;
  }


  .challenge-intro{
    max-width:100%;

    font-size:15px;
    line-height:1.7;
  }


  .challenge-list{
    width:100%;
    max-width:none;

    margin:30px 0;
  }


  .challenge-list li{
    padding:14px 8px 14px 23px;

    font-size:14px;
    line-height:1.5;
  }


  .challenge-list li::before{
    width:7px;
  }


  .challenge-text{
    max-width:100%;

    font-size:15px;
    line-height:1.7;
  }


  .challenge-closing{
    max-width:100%;

    margin-top:28px;

    padding-left:21px;

    font-size:23px;
    line-height:1.3;
  }

}