.subscription-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 14px;
  border: 1px solid #9d9d9d;
  background: #f3f3f3;
}

.subscription-summary div {
  padding: 13px;
  text-align: center;
}

.subscription-summary div + div {
  border-left: 1px solid #c4c4c4;
}

.subscription-summary span,
.subscription-summary strong {
  display: block;
}

.subscription-summary span {
  color: #666666;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
}

.subscription-summary strong {
  margin-top: 3px;
  color: #1d3551;
  font: bold 21px "Courier New", monospace;
}

.subscription-card {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 175px auto;
  gap: 16px;
  align-items: center;
  padding: 12px;
}

.subscription-info {
  display: grid;
  gap: 3px;
}

.subscription-name {
  font-size: 14px;
}

.subscription-price {
  font-size: 12px;
  font-weight: bold;
}

.subscription-date {
  color: #555555;
  font-size: 9px;
}

.subscription-countdown span {
  display: block;
  margin-bottom: 3px;
  color: #666666;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 1px;
}

.subscription-countdown strong {
  font-size: 12px;
  white-space: nowrap;
}

.subscription-actions {
  display: grid;
  gap: 5px;
}

@media (max-width: 620px) {
  .subscription-card {
    grid-template-columns: 1fr auto;
  }
  .subscription-countdown { grid-column: 1; grid-row: 2; }
  .subscription-actions { grid-column: 2; grid-row: 1 / 3; }
}