/* A larger key display, using the existing photograph without repainting it. */
body[data-delivery="album"] .page-main #products .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#products .product-media {height: 380px;}
#products .kb-key-feature {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
}
#products .kb-key-feature .copy {padding: 20px 0 0;}
#products .kb-key-feature h3 {margin: 4px 0 9px;}
#products .kb-key-feature p {font-size: 16px; line-height: 1.7;}
#products .kb-key-feature .kb-key-description {font-size: 15px; margin-top: 10px;}
#products .kb-key-feature .key-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  height: 380px;
  padding: 10px;
  align-content: center;
  overflow: hidden;
  background: var(--soft);
}
.kb-key-tile {position: relative; aspect-ratio: 1; overflow: hidden; min-width: 0;}
#products .kb-key-tile img {
  position: absolute;
  top: -25%;
  left: 0;
  width: 400%;
  max-width: none;
  height: auto;
  object-fit: initial;
}
#products .kb-key-tile:nth-child(2) img {left: -100%;}
#products .kb-key-tile:nth-child(3) img {left: -200%;}
#products .kb-key-tile:nth-child(4) img {left: -300%;}
#key-use .usage-grid figure > img.kb-key-phone {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}
#start .steps p {line-height: 1.8; margin-bottom: 0; text-wrap: pretty;}
#start .launch-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  padding: 28px;
}
#start .launch-guide h3 {font-size: 18px; margin: 0 0 12px;}
#start .launch-guide p {margin: 0; font-size: 15px; line-height: 1.8; text-wrap: pretty;}
#start .launch-guide p + p {margin-top: 7px;}
#start .launch-guide .kb-guide-note {font-size: 14px; color: var(--muted);}
#start .launch-guide .kb-guide-link {grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line);}
#start .launch-guide .kb-guide-link a {display: inline-block; min-height: 32px; font-weight: 650;}
@media (max-width: 900px) {
  body[data-delivery="album"] .page-main #products .product-grid {grid-template-columns: 1fr;}
  #products .product-card {display: grid; grid-template-columns: 45% minmax(0, 1fr); align-items: center; gap: 24px;}
  #products .product-media {height: 240px;}
  #products .kb-key-feature .key-media {height: auto; min-height: 240px; padding: 10px;}
  #products .kb-key-feature .copy {padding: 0;}
}
@media (max-width: 760px) {
  body[data-delivery="album"] .page-main #products .product-grid {grid-template-columns: 1fr;}
  #products .product-media {height: 190px;}
  #products .kb-key-feature {grid-template-columns: 1fr; gap: 20px; padding: 20px; background: var(--soft); border-radius: 10px;}
  #products .kb-key-feature .key-media {max-width: 480px; min-height: 0; height: auto; margin: auto; gap: 10px; padding: 0;}
  #products .kb-key-feature .copy {padding: 0 2px 2px;}
  #products .kb-key-feature h3 {font-size: 25px; margin: 5px 0 12px;}
  #products .kb-key-feature p {font-size: 18px;}
  #products .kb-key-feature .kb-key-description {font-size: 15px; margin-top: 12px;}
  #key-use .usage-grid figure > img.kb-key-phone {height: auto; aspect-ratio: 4 / 3;}
  #start .launch-guide {grid-template-columns: 1fr; gap: 22px; padding: 22px;}
  #start .launch-guide .kb-guide-link {padding-top: 14px;}
}
@media (max-width: 360px) {
  #products .kb-key-feature {padding: 14px; gap: 16px;}
  #start .launch-guide {padding: 18px;}
}