// Shared body styles for the form cards on the settings pages.
@use "vars" as *;

.panel { padding: 18px; }
.panel__lead { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.panel__lead strong { color: var(--text); font-weight: 500; }
.panel__banner { margin-bottom: 16px; }
.panel__hint { color: var(--muted); font-size: 14px; }

.panel__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

@media (max-width: $mobileBreak) {
    .panel__pair { grid-template-columns: 1fr; }
}