| Index: static/scss/components/_groups.scss | 
| =================================================================== | 
| --- a/static/scss/components/_groups.scss | 
| +++ b/static/scss/components/_groups.scss | 
| @@ -16,41 +16,62 @@ | 
|  | 
| // display like a table (even grid) | 
|  | 
| .group-container | 
| { | 
| width: 100%; | 
| max-width: $max-width; | 
| margin: 0 auto; | 
| -  padding: $md 0; | 
| +  padding: $xl 0; | 
| + | 
| +  @media (max-width: $desktop-breakpoint) | 
| +  { | 
| +    padding: $xs; | 
| +  } | 
| } | 
|  | 
| .group-container > %headings, | 
| .group-container > p | 
| { | 
| -  margin: $md auto; | 
| +  margin: $lg auto; | 
| padding: 0 $sm; | 
| } | 
|  | 
| + | 
| +.group-container > p | 
| +{ | 
| +  @media (max-width: $desktop-breakpoint) | 
| +  { | 
| +    margin: $md auto; | 
| +  } | 
| +} | 
| + | 
| + | 
| + | 
| .group | 
| { | 
| display: table; | 
| width: 100%; | 
| table-layout: fixed; | 
| } | 
|  | 
| .group-container .group | 
| { | 
| margin-bottom: 0; | 
| } | 
|  | 
| .group-container > %headings | 
| { | 
| margin-top: 0; | 
| + | 
| +  @media (max-width: $desktop-breakpoint) | 
| +  { | 
| +    margin: $md auto; | 
| +  } | 
| } | 
|  | 
| .group .card, | 
| .group .item | 
| { | 
| display: table-cell; | 
| vertical-align: top; | 
| } | 
|  |