| Index: static/scss/components/_cards.scss | 
| =================================================================== | 
| --- a/static/scss/components/_cards.scss | 
| +++ b/static/scss/components/_cards.scss | 
| @@ -24,42 +24,62 @@ | 
| background-color: $primary-bg; | 
| } | 
|  | 
| .card %headings | 
| { | 
| @extend h3; | 
| height: $md + $sm; | 
| margin: $sm 0 $sm 0; | 
| + | 
| +  @media (max-width: $mobile-breakpoint) | 
| +  { | 
| +    height: auto; | 
| +  } | 
| } | 
|  | 
| .card-icon | 
| { | 
| margin: $sm 0; | 
| } | 
|  | 
| .center .card-icon | 
| { | 
| margin: $lg - $sm 0 $md 0; | 
| + | 
| +  @media (max-width: $tablet-breakpoint) | 
| +  { | 
| +    margin-top: $md; | 
| +  } | 
| +  @media (max-width: $mobile-breakpoint) | 
| +  { | 
| +    margin-top: $sm; | 
| +  } | 
| } | 
|  | 
| img.card-icon, | 
| .card-icon img | 
| { | 
| height: 48px; | 
| } | 
|  | 
| .card img.block | 
| { | 
| margin: 0; | 
| } | 
|  | 
| .card-summary { | 
| margin: $md 0; | 
| height: $lg; | 
| + | 
| +  @media (max-width: $mobile-breakpoint) | 
| +  { | 
| +    margin: $sm; | 
| +    height: auto; | 
| +  } | 
| } | 
|  | 
| // negative margin shrinks containing paragraph margin | 
| .card %buttons | 
| { | 
| display: block; | 
| width: 100%; | 
| margin-bottom: -$xs; | 
|  |