/* =========================================================
  ESTILOS GENERALES
  ========================================================= */
.how{
  padding: 3% 15% 2%;
}
.how .container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.how_header{
  text-align: center;
  width: 100%;
}
.how .how_header h2{
  color: var(--ink);
}
.intro-tiles {
  display: flex;
  flex-direction: column;
  margin: 22px 0;
}
.intro-tiles h3{
  color: var(--ink);
  margin: 0;
}
.how .intro-viewer{
  position: relative;
}
.how .intro-viewer .muted{
  position: absolute;
  bottom: 10px;
  right: 8px;
}
.how .intro-viewer img{
  width: 95%;
  margin-left: 5%;
  border-radius: 8px;
}
/* =========================================================
  RESPONSIVE: MÓVILES / TABLET (≤ 959px)
  ========================================================= */
@media (max-width:959px){
  .intro-tiles,.intro-viewer{width: 100%;}
  .how .container{flex-direction: column;}
  .intro-tiles {margin-bottom: 2em;}
  .intro-tiles {gap: 18px;}
  .how .intro-viewer img,.how .intro-viewer .muted{display: none;}
}

/* =========================================================
  RESPONSIVE: ESCRITORIO (≥ 960px)
  ========================================================= */
@media (min-width:960px){
  .intro-tiles{width: 55%;}
  .intro-viewer{width: 45%;}
  .how_header{margin-bottom: 2em;}
}