/* These controls only affect solution icons below the mobile breakpoint. */
:root {
  --mobile-solution-icon-size: 42px;
  --mobile-solution-icon-radius: 10px;
  --mobile-solution-icon-background: #eff2e5;
  --mobile-solution-icon-border: #d7dec7;
  --mobile-solution-icon-color: #59692f;
}

@media (max-width: 760px) {
  .solution .icon {
    align-items: center;
    background: var(--mobile-solution-icon-background);
    border: 1px solid var(--mobile-solution-icon-border);
    border-radius: var(--mobile-solution-icon-radius);
    color: var(--mobile-solution-icon-color);
    display: grid;
    font-size: 20px;
    height: var(--mobile-solution-icon-size);
    line-height: 1;
    margin-bottom: 14px;
    place-items: center;
    width: var(--mobile-solution-icon-size);
  }
}