/* One platform per row on the homepage and the platform hub. The card copy,
   app links and destinations continue to come from DLE. */
main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-grid {
  grid-template-columns:minmax(0,1fr);
  gap:12px;
}

main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card,
main.catalog-home-page .platform-choice-home .platform-choice-card {
  display:grid;
  grid-template-columns:148px minmax(0,1fr);
  min-height:166px;
  border-radius:5px;
  box-shadow:none;
  transform:none;
}

main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card:is(:hover,:focus-within),
main.catalog-home-page .platform-choice-home .platform-choice-card:is(:hover,:focus-within) {
  transform:none;
}

main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-visual,
main.catalog-home-page .platform-choice-home .platform-choice-visual {
  display:grid;
  place-items:center;
  width:auto;
  height:auto;
  min-height:166px;
  border-right:1px solid #e1e8ee;
  border-bottom:0;
  background:linear-gradient(135deg,var(--card-tint-light),#f1f5f8);
}

main.catalog-home-page .platform-choice-home .platform-choice-visual::before,
main.catalog-home-page .platform-choice-home .platform-choice-visual::after { content:none; }

main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-device-frame,
main.catalog-home-page .platform-choice-home .platform-choice-device-frame {
  margin:0;
  transform:scale(.48);
}

main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card[data-device-group="mobile"] .platform-choice-device-frame,
main.catalog-home-page .platform-choice-home .platform-choice-card[data-device-group="mobile"] .platform-choice-device-frame {
  transform:scale(.68);
}

main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card-body,
main.catalog-home-page .platform-choice-home .platform-choice-card-body {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px 294px;
  grid-template-rows:auto auto;
  align-items:center;
  gap:8px 24px;
  padding:19px 22px 20px;
}

/* The hub uses framed app links, so its app column needs a little more room. */
main[data-product="office-platforms"] .platform-choice .platform-choice-card-body {
  grid-template-columns:minmax(0,1fr) 330px 280px;
}

main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card-heading { grid-column:1;grid-row:1; }
main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-description {
  grid-column:1;
  grid-row:2;
  align-self:start;
  margin:0;
}
main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-detail {
  grid-column:2;
  grid-row:1;
  align-self:end;
  margin:0;
}
main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-apps-group {
  grid-column:2;
  grid-row:2;
  align-self:start;
  margin:0;
  padding:0;
}
main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-button {
  grid-column:3;
  grid-row:1 / 3;
  align-self:center;
  min-height:48px;
  margin:0;
}
main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card :is(h2,h3) {
  font-size:19px;
  line-height:1.25;
}
main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-apps {
  gap:4px 8px;
}

@media (max-width:1250px) {
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card,
  main.catalog-home-page .platform-choice-home .platform-choice-card { grid-template-columns:112px minmax(0,1fr); }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-visual,
  main.catalog-home-page .platform-choice-home .platform-choice-visual { min-height:185px; }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-device-frame,
  main.catalog-home-page .platform-choice-home .platform-choice-device-frame { transform:scale(.42); }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card-body,
  main.catalog-home-page .platform-choice-home .platform-choice-card-body {
    grid-template-columns:minmax(0,1fr) minmax(272px,.74fr);
    grid-template-rows:auto auto auto;
    gap:8px 20px;
    padding:19px 20px;
  }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card-heading { grid-column:1;grid-row:1; }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-description { grid-column:1;grid-row:2 / 4; }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-detail { grid-column:2;grid-row:1;align-self:start; }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-apps-group { grid-column:2;grid-row:2; }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-button { grid-column:2;grid-row:3; }
}

@media (min-width:721px) and (max-width:1250px) {
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-button {
    gap:8px;
    padding-inline:10px;
    font-size:13px;
  }
}

@media (max-width:720px) {
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card,
  main.catalog-home-page .platform-choice-home .platform-choice-card {
    display:block;
    min-height:0;
    position:relative;
  }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-visual,
  main.catalog-home-page .platform-choice-home .platform-choice-visual {
    position:absolute;
    top:17px;
    left:17px;
    width:53px;
    height:53px;
    min-height:0;
    border:0;
    border-radius:8px;
    background:var(--card-tint-light);
  }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-device-frame,
  main.catalog-home-page .platform-choice-home .platform-choice-device-frame,
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card[data-device-group="mobile"] .platform-choice-device-frame,
  main.catalog-home-page .platform-choice-home .platform-choice-card[data-device-group="mobile"] .platform-choice-device-frame {
    width:38px;
    height:38px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    transform:none;
  }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-device-frame::before,
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-device-frame::after { content:none; }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-device-screen,
  main.catalog-home-page .platform-choice-home .platform-choice-device-screen { background:transparent; }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-device-screen img,
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card[data-device-group="mobile"] .platform-choice-device-screen img { width:34px;height:34px; }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card-body,
  main.catalog-home-page .platform-choice-home .platform-choice-card-body {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    gap:0;
    padding:18px 17px 17px;
  }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-card-heading {
    grid-column:1;
    grid-row:auto;
    min-height:53px;
    padding-left:66px;
    align-items:center;
  }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-number { display:none; }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-description,
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-detail,
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-apps-group,
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-button {
    grid-column:1;
    grid-row:auto;
  }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-description { margin-top:15px; }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-detail { margin-top:10px; }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-apps-group { margin-top:14px; }
  main:is([data-product="office-platforms"],.catalog-home-page) .platform-choice .platform-choice-button { margin-top:16px; }
}