/* =========================================================
   MOBILE CLIENTS PARTNERS PAGE
========================================================= */

@media screen and (max-width: 768px) {

    /* =========================================================
        RESET DESKTOP
    ========================================================= */

    .mobile-clients-partners-page * {
        box-sizing: border-box;
    }

    .mobile-clients-partners-page .site-container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .mobile-clients-partners-page {
        margin-top: 0;
        padding-top: 0;
    }
    
    .mobile-clients-partners-page {
    background: #FBFAF7;
    color: #231C18;
    overflow-x: hidden;
    }

    /* HERO */

    .mobile-clients-hero {
    position: relative;
    overflow: hidden;

    min-height: 659px;

    padding: 120px 21px 54px;

    color: #F5F3EF;
    background-color: #3C1E1E;

    background-image:
        linear-gradient(
        to bottom,
        rgba(60, 30, 30, 0.08) 0%,
        rgba(60, 30, 30, 0.22) 45%,
        rgba(60, 30, 30, 0.58) 100%
        ),
        url("../../img/clients-partners/hero-clients-mobile.png");

    background-size: cover;
    background-position: 62% center;
    background-repeat: no-repeat;
    }

    .mobile-clients-hero__content {
    position: relative;
    z-index: 2;
    padding-top: 120px;
    }

    .mobile-clients-hero__content span {
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
    line-height: 30px;
    }

    .mobile-clients-hero__content h1 {
    margin: 0;
    max-width: 400px;
    font-family: var(--font-serif);
    font-size: 35px;
    font-weight: 350;
    line-height: 42px;
    color: #F5F3EF;
    }

    /* INDUSTRIES */

    .mobile-clients-industries {
    padding: 42px 22px 0;
    }

    .mobile-clients-industries h2,
    .mobile-clients-types h2,
    .mobile-clients-geographies h2,
    .mobile-clients-partnerships h2 {
    margin: 0 0 22px;
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 350;
    line-height: 40px;
    color: #212121;
    }

    .mobile-clients-industries p,
    .mobile-clients-types p,
    .mobile-clients-geographies p,
    .mobile-clients-partnerships p,
    .mobile-partner p {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 400;
    line-height: 35px;
    color: #000000;
    }

    .mobile-industries-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;
    margin-top: 34px;
    }

    .mobile-industry-card img {
    width: 194px;
    height: 271px;
    display: block;
    object-fit: cover;
    }

    .mobile-industry-card span {
    display: block;
    margin-top: 8px;
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 35px;
    color: #000000;
    }

    /* TYPES */

    .mobile-clients-types {
    padding: 46px 22px 42px;
    }

    .mobile-clients-types ul {
    margin: 24px 0 0;
    padding-left: 18px;
    }

    .mobile-clients-types li {
    margin-bottom: 10px;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 400;   
    line-height: 28px;
    }

    /* GEOGRAPHIES */

    .mobile-clients-geographies {
    background: #F2F1EC;
    padding: 42px 22px 48px;
    }

    .mobile-clients-geographies p + p {
    margin-top: 18px;
    }

    .mobile-clients-geographies__map {
    margin-top: 34px;
    width: calc(100% + 70px);
    margin-left: -35px;
    overflow: hidden;
    }

    .mobile-clients-geographies__map img {
    width: 100%;
    display: block;
    opacity: .9;
    }

    .mobile-clients-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 22px;
    }

    .mobile-clients-metrics div {
    display: flex;
    flex-direction: column;
    }

    .mobile-clients-metrics strong {
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 300;
    line-height: 1;
    color: #3C1E1E;
    }

    .mobile-clients-metrics span {
    margin-top: 6px;
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 14px;
    color: #3C1E1E;
    }

    /* PARTNERSHIPS */

    .mobile-clients-partnerships {
    padding: 46px 22px 52px;
    background: #FFFFFF;
    }

    .mobile-partner {
    margin-top: 34px;
    }

    .mobile-partner p + p {
    margin-top: 14px;
    }

    .mobile-partner__logo {
    display: block;
    margin-bottom: 18px;
    }

    .mobile-partner__logo--esade {
    width: 118px;
    }

    .mobile-partner__logo--bg {
    width: 120px;
    }

    .mobile-partner__logo--apm {
    width: 96px;
    }

    .mobile-partner__apm {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    }

    .mobile-partner__logo-text {
    width: 220px;
    }

    /* =========================================================
    SUCCESS STORIES MOBILE
  ========================================================= */

  .mobile-home-success {
    padding: 28px 20px 29px;
    background: #f2f1ec;
  }

  .mobile-home-success .mobile-section-label {
    display: block;
    margin-bottom: 8px;

    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    text-transform: uppercase;

    color: rgba(0, 0, 0, 0.5);
  }

  .mobile-home-success h2 {
    margin: 0 0 22px;

    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 350;
    line-height: 40px;

    color: #000000;
  }

  .mobile-home-success__arrows {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
  }

  .mobile-home-success__arrows button {
    padding: 0;
    border: 0;
    background: transparent;

    font-family: var(--font-sans);
    font-size: 20px;
    line-height: 1;

    color: #000000;
  }

  .mobile-home-success__grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .mobile-home-success-card {
    width: 100%;
    min-height: 417px;

    padding: 14px 17px 25px;

    display: flex;
    flex-direction: column;
  }

  .mobile-home-success-card--dark {
    background: #FFFFFF;
    color: #2b221e;
  }

  .mobile-home-success-card--light {
    background: #FFFFFF;
    color: #2b221e;
  }

  .mobile-home-success-card__meta {
    margin-bottom: 12px;
  }

  .mobile-home-success-card__meta span,
  .mobile-home-success-card__meta strong {
    display: block;

    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-transform: uppercase;
  }

  .mobile-home-success-card__meta span {
    color: #8d8e7f;
  }

  .mobile-home-success-card--dark .mobile-home-success-card__meta strong {
    color: #000000;
  }

  .mobile-home-success-card--light .mobile-home-success-card__meta strong {
    color: #000000;
  }

  .mobile-home-success-card img {
    width: 100%;
    height: 161px;

    display: block;
    object-fit: cover;
    object-position: center;

    margin-bottom: 22px;
  }

  .mobile-home-success-card h3 {
    margin: 0 0 26px;

    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 350;
    line-height: 33px;

    color: inherit;
  }

  .mobile-home-success-card a {
    width: 208px;
    height: 55px;

    margin-top: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #000000;
    color: #FFFFFF;

    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 400;
    line-height: 16px;

    text-decoration: none;
  }

}