.terminal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.terminal-breadbox .terminal-screen {
  width: 72%;
  border-color: #a07c59;
  color: #c5c1ff;
  background: radial-gradient(circle, #3b378e, #211e68 74%);
  text-shadow: 0 0 8px rgba(197,193,255,.78);
}
.terminal-breadbox .terminal-deck {
  left: 9%;
  right: 9%;
  height: 52px;
  border-radius: 14px 14px 22px 22px;
  background: linear-gradient(#b38b63,#6a4d36);
}

.terminal-gallery .terminal-screen {
  width: 62%;
  height: 57%;
  border: 10px solid #d9d5c8;
  border-bottom-width: 18px;
  border-radius: 23px 23px 12px 12px;
  color: #111;
  background: #efeee8;
  box-shadow: inset 0 0 20px rgba(0,0,0,.14), 0 12px 28px rgba(0,0,0,.35);
  text-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .66rem;
}
.terminal-gallery .terminal-screen::after {
  background: repeating-linear-gradient(to bottom,rgba(0,0,0,.02) 0 1px,transparent 2px 4px);
}
.terminal-gallery .terminal-deck {
  left: 20%;
  right: 20%;
  height: 34px;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(#c8c4b8,#9b978b);
  transform: none;
}
.terminal-gallery .terminal-deck::after { display: none; }

.terminal-luggable .terminal-visual {
  background: linear-gradient(145deg,rgba(78,85,76,.32),rgba(0,0,0,.35));
}
.terminal-luggable .terminal-screen {
  width: 78%;
  height: 52%;
  border: 10px solid #52594f;
  border-radius: 5px;
  color: #c8f0be;
  background: radial-gradient(circle,#18271b,#07100a 75%);
  text-shadow: 0 0 7px rgba(200,240,190,.7);
}
.terminal-luggable .terminal-deck {
  left: 6%;
  right: 6%;
  height: 48px;
  border: 2px solid #242824;
  border-radius: 4px 4px 13px 13px;
  background: linear-gradient(#646b61,#343a33);
}

@media (max-width: 980px) and (min-width: 861px) {
  .terminal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .terminal-grid { grid-template-columns: 1fr; }
}