@media (min-width: 42rem) {
  .app-shell {
    width: min(100% - 3rem, var(--content-width));
  }

  .settings {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    padding: var(--space-4);
  }

  .calculator {
    padding: var(--space-5);
  }

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

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

@media (max-width: 27rem) {
  .building-grid,
  .options-grid,
  .options-toggle-grid {
    grid-template-columns: 1fr;
  }

  .target-row {
    grid-template-columns: 1fr 1fr;
  }

  .target-row .button--icon {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .button {
    transition: background-color 160ms ease, transform 160ms ease;
  }

  .button:active:not(:disabled) {
    transform: translateY(1px);
  }
}