/* =========================================================
   PLATFORM SHOWCASE
========================================================= */

.platform-showcase {
  position: relative;

  z-index:
    40;

  background:
    var(--light);

  padding:
    220px
    0
    0;
}


/* =========================================================
   HEADER
========================================================= */

.platform-showcase-header {
  width:
    calc(100% - 160px);

  margin:
    0 auto
    50px;
}

.platform-showcase-title {
  width:
    100%;

  font-size:
    var(--headline-lg);

  line-height:
    var(--line-tight);

  letter-spacing:
    var(--tracking-tight);

  font-weight:
    var(--weight-bold);

  color:
    var(--dark);

  white-space:
    nowrap;
}


/* =========================================================
   MASTER CARD
========================================================= */

.platform-master-card {
  position:
    relative;

  overflow:
    hidden;

  aspect-ratio:
    2 / 1;

  width:
    calc(100% - 160px);

  margin:
    0 auto
    220px;

  border-radius:
    44px;

  background:
    var(--white);
}

.platform-master-image {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
 
  object-position: center bottom;


  transform:
    scale(1.01);
}

.platform-master-overlay {
  position:
    absolute;

  inset:
    0;

   background:
    linear-gradient(
      to bottom,
        var(--white);
        var(--light);
    );

  z-index:
    1;
}


/* =========================================================
   MASTER CONTENT
========================================================= */

.platform-master-content {
  position:
    absolute;

  top:
    84px;

  left:
    50%;

  transform:
    translateX(-50%);

  z-index:
    2;

  width:
    100%;

  text-align:
    center;

  color:
   var(--dark);
}

.platform-master-headline {
  margin:
    0 auto
    var(--space-xl);

  font-size:
    var(--headline-md);

  line-height:
    var(--line-tight);

  letter-spacing:
    -0.055em;

  font-weight:
    var(--weight-bold);

  white-space:
    nowrap;
}


/* =========================================================
   MASTER BUTTON
========================================================= */

.platform-master-content .button {
  margin-top:
    24px;
}


/* =========================================================
   GRID HEADLINE
========================================================= */

.platform-grid-header {
  width:
    calc(100% - 160px);

  margin:
    0 auto
    50px;
}

.platform-grid-headline {
  font-size:
    var(--headline-lg);

  line-height:
    var(--line-tight);

  letter-spacing:
    -0.055em;

  font-weight:
    var(--weight-bold);

  color:
    var(--dark);

  text-wrap:
    balance;
}


/* =========================================================
   GRID
========================================================= */

.platform-grid {
  width:
    calc(100% - 160px);

  margin:
    0 auto
    220px;

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    96px;
}


/* =========================================================
   CARD LINKS
========================================================= */

.platform-card-link {
  display: block;

  text-decoration: none;

  color: inherit;
}




/* =========================================================
   CARD
========================================================= */

.platform-card {
  overflow:
    hidden;

  border-radius:
    42px;

  background:
    var(--white);

  padding:
    0 0 72px;

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.platform-card:hover {
  transform:
    translateY(-8px);

  box-shadow:
    0 24px 80px rgba(0,0,0,0.08);
}

.platform-card-image {
  width:
    100%;

  aspect-ratio:
    16 / 10;

  object-fit:
    cover;
}

.platform-card-content {
  padding:
    48px
    48px
    0;
}

.platform-card-label {
  margin-bottom:
    var(--space-md);

  color:
    rgba(15,17,58,0.58);

  font-size:
    var(--label-size);

  font-weight:
    var(--weight-medium);

  letter-spacing:
    var(--tracking-normal);
}

.platform-card-title {
  max-width:
    8ch;

  font-size:
    var(--headline-md);

  line-height:
    0.9;

  letter-spacing:
    -0.055em;

  font-weight:
    var(--weight-bold);

  color:
    var(--dark);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

  .platform-showcase {
    padding:
      160px
      0
      0;
  }

  .platform-showcase-header,
  .platform-master-card,
  .platform-grid-header,
  .platform-grid {
    width:
      calc(100% - 48px);
  }

  .platform-grid {
    grid-template-columns:
      1fr;

    gap:
      56px;

    margin-bottom:
      160px;
  }

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

  .platform-showcase-title,
  .platform-grid-headline {
    white-space:
      normal;
  }

  .platform-showcase-title {
    font-size:
      clamp(3rem, 12vw, 5rem);

    line-height:
      0.92;

    letter-spacing:
      -0.06em;
  }

  /* =====================================================
     MASTER CARD
  ====================================================== */

  .platform-master-card {
    min-height:
      560px;

    border-radius:
      48px;

    overflow:
      hidden;
  }

  .platform-master-image {
    height:
      100%;

    object-fit:
      cover;
  }

  /* =====================================================
     MASTER CONTENT
  ====================================================== */

  .platform-master-content {
    top:
      56px;

    padding:
      0 24px;
  }

  .platform-master-headline {

    font-size:
      clamp(2.8rem, 9vw, 4.5rem);

    line-height:
      0.92;

    letter-spacing:
      -0.05em;

    font-weight:
      var(--weight-bold);

    white-space:
      normal;

    text-align:
      center;

    max-width:
      7ch;

    margin:
      0 auto
      40px;
  }
}

/* =====================================================
   MASTER IMAGE
====================================================== */

.platform-master-card--again .platform-master-image {

    object-position:
      72% center;
}


  /* =====================================================
     BUTTON
  ====================================================== */

  .platform-master-content .button {

    min-width:
      220px;

    min-height:
      58px;

    margin-top:
      24px;
  }

}