alignment fixes

ui/component/rewardTile/view.jsx

@@ -35,7 +35,7 @@ const RewardTile = (props: Props) => {
       title={reward.reward_title}
       subtitle={reward.reward_description}
       actions={
-        <div className="card__actions">
+        <div className="section__actions">
           {reward.reward_type === rewards.TYPE_GENERATED_CODE && (
             <Button button="primary" onClick={openRewardCodeModal} label={__('Enter Code')} />
           )}

ui/scss/component/_card.scss

@@ -8,12 +8,6 @@
   ~ .card {
     margin-bottom: var(--spacing-m);
   }
-
-  @media (max-width: $breakpoint-small) {
-    ~ .card {
-      margin-bottom: 0;
-    }
-  }
 }
 
 .card--disabled {

ui/scss/component/_claim-list.scss

@@ -311,7 +311,6 @@
 
 .claim-grid__title--secondary {
   margin-left: auto;
-  margin-top: calc(var(--spacing-m) * -1);
 }
 
 .claim-grid__help {
@@ -394,15 +393,15 @@
 }
 
 .claim-tile__title {
-  margin-bottom: 0;
   margin: var(--spacing-s);
   font-weight: 600;
-  font-size: var(--font-small);
   color: var(--color-text);
-  min-height: 2.5rem;
-
-  @media (max-width: $breakpoint-small) {
   font-size: var(--font-xsmall);
+  min-height: 2rem;
+
+  @media (min-width: $breakpoint-small) {
+    min-height: 2.5rem;
+    font-size: var(--font-small);
   }
 }
 

ui/scss/component/section.scss

@@ -119,11 +119,9 @@
     flex-wrap: wrap;
 
     > * {
-      &:not(:only-of-type) {
       margin-bottom: var(--spacing-s);
     }
   }
-  }
 
   .button--primary,
   .button ~ .button--link {