.grid-container {
  display: grid;
  gap: 1rem;

  /* Panels are paired by height so nothing stretches far past its content. The previous
     "a b c" / "a d e" / "f f e" put the two tallest panels (a and e) on two-row spans
     whose rows were sized by other frames: once the weather card landed in d, row 2 grew
     and both spans stretched with it, leaving 462px of empty card in a and 327px in e. */
  grid-template-areas:
    "a b c"
    "d e e";

  /* Cards size to their content instead of stretching to fill the row. Without this a
     panel shorter than its row keeps the difference as blank space inside the card. */
  align-items: start;
}

.grid-item {
  overflow: visible;
  min-height: 15rem;
  min-width: 20vw;
  position: relative;
  margin: 5px;
  padding: 45px 15px 15px 15px;
  float: left;
  background: var(--bg-card);
  border: 4px solid var(--primary-color);
  border-radius: 10px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--card-sheen);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}

.grid-item > p:not(:first-child) {
  flex-shrink: 0;
}

.grid-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl), 0 0 20px rgba(69, 123, 157, 0.4);
  border-color: var(--accent-color);
}

.grid-item > p:first-child {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-width: 120px;
  padding: 6px 20px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
  border: 2px solid var(--primary-color);
  border-radius: 20px;
  text-align: center;
  font-weight: bold;
  font-size: 0.95rem;
  color: var(--on-primary);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  z-index: 5;
}

.grid-item p {
  padding-top: 10px;
  color: var(--text-primary);
  text-shadow: var(--text-emboss);
}

.grid-item p b {
  color: var(--primary-color);
}

.frame-1 {
  grid-area: a;
}
.frame-2 {
  grid-area: b;
}
.frame-3 {
  grid-area: c;
}
.frame-4 {
  grid-area: d;
}
.frame-5 {
  grid-area: e;
}