| 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; | 
| } |