/* ============================================================
 * Compass Framework
 * Common Gateway Component
 * ========================================================== */

.compass-common-gateway {
  padding-top: 4.5rem;
  padding-bottom: 5rem;
  background: #ffffff;
}

.compass-common-gateway-heading {
  text-align: center;
  margin-bottom: 2.5rem;
}

.compass-common-gateway-heading .title-section {
  margin-bottom: 1rem;
}

.compass-common-gateway-heading .section-lead {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.9;
}

.compass-common-gateway-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.compass-common-gateway-card:hover,
.compass-common-gateway-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(15,23,42,.10);
}

.compass-common-gateway-card img {
  width: 88px;
  height: 88px;
  margin-bottom: 1.4rem;
}

.compass-common-gateway-card h3 {
  margin-bottom: .8rem;
  font-size: 1.4rem;
  font-weight: 700;
}

.compass-common-gateway-card p {
  line-height: 1.9;
}

@media (max-width:767px){

  .compass-common-gateway{
    padding-top:3.5rem;
    padding-bottom:4rem;
  }

  .compass-common-gateway-card{
    padding:2rem 1.4rem;
  }

  .compass-common-gateway-card img{
    width:72px;
    height:72px;
  }

  .compass-common-gateway-card h3{
    font-size:1.2rem;
  }

}