/* Compact layout for the two featured cloud products. Artwork is unchanged. */
.showcase.showcase-v4 > .feature-panel.feature-panel--compact {
  display:grid;
  grid-template-columns:minmax(0,1fr) 192px;
  grid-template-rows:1fr auto;
  column-gap:24px;
  row-gap:12px;
  min-height:264px;
  padding:28px;
}
.showcase.showcase-v4 .feature-panel--compact > div:first-child {
  grid-column:1;
  grid-row:1;
  min-width:0;
  max-width:none;
}
.showcase.showcase-v4 .feature-panel--compact h3 { margin:8px 0 12px; }
.showcase.showcase-v4 .feature-panel--compact p { max-width:none; margin-bottom:0; }
.showcase.showcase-v4 .feature-panel--compact > a {
  grid-column:1;
  grid-row:2;
  justify-self:start;
  align-self:end;
  margin:0;
}
.showcase.showcase-v4 .feature-panel--compact > .panel-art-v4 {
  position:relative;
  inset:auto;
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  justify-self:center;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  width:192px;
  height:176px;
  min-height:176px;
  margin:0;
}
@media (max-width:1100px) {
  .showcase.showcase-v4 > .feature-panel.feature-panel--compact {
    grid-template-columns:minmax(0,1fr) 144px;
    grid-template-rows:auto auto;
    gap:12px 16px;
    min-height:0;
    padding:24px;
  }
  .showcase.showcase-v4 .feature-panel--compact > div:first-child { grid-column:1 / -1; }
  .showcase.showcase-v4 .feature-panel--compact > a { align-self:center; }
  .showcase.showcase-v4 .feature-panel--compact > .panel-art-v4 {
    grid-row:2;
    width:144px;
    height:128px;
    min-height:128px;
  }
}
/* All five cards share the compact composition on phones only. */
@media (max-width:600px) {
  .showcase.showcase-v4 > .feature-panel:nth-child(n) {
    display:grid;
    grid-template-columns:minmax(0,1fr) 144px;
    grid-template-rows:auto auto;
    gap:12px 16px;
    min-height:0;
    padding:24px;
    margin:0;
  }
  .showcase.showcase-v4 .feature-panel > div:first-child {
    grid-column:1 / -1;
    grid-row:1;
    min-width:0;
    max-width:none;
  }
  .showcase.showcase-v4 .feature-panel h3 { margin:8px 0 12px; }
  .showcase.showcase-v4 .feature-panel p { max-width:none; margin-bottom:0; }
  .showcase.showcase-v4 .feature-panel > a {
    grid-column:1;
    grid-row:2;
    align-self:center;
    justify-self:start;
    margin:0;
  }
  .showcase.showcase-v4 > .feature-panel:nth-child(n) > .panel-art-v4 {
    position:relative;
    inset:auto;
    display:grid;
    grid-column:2;
    grid-row:2;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    align-self:center;
    justify-self:center;
    width:144px;
    height:128px;
    min-height:128px;
    margin:0;
  }
  /* Browser and connected-domain shadows can use the card's inner gutter. */
  .showcase.showcase-v4 > .feature-panel:nth-child(n) > .art-host { overflow:visible; }
}
@media (max-width:360px) {
  .showcase.showcase-v4 > .feature-panel:nth-child(n) { padding:20px; column-gap:12px; }
}