responsive styling - overlay title, embedded button adjust

vue-theme/src/components/hero.vue

             left: 0
             overflow: clip
             h2
-                font-size: $ms-1
+                font-size: $ms-2
+                margin: 0
                 color: $cia_white
                 text-shadow: 1px 1px $cia_black
-                max-width: 70vw
+                max-width: 90vw
+            p 
+                display: none
             a 
                 color: inherit 
                 text-decoration: none
             position: absolute
             min-height: $ms-7
             min-width: $ms-7
-            background-color: rgba(170,17,0,0.4)
+            background-color: rgba(170,17,0,0.5)
             border-radius: 50%
             border: 2px white solid
             &:hover
-                border: 2px #DDD solid
-                background-color: rgba(170,170,170,0.7)
+                background-color: rgba(170,17,0,0.8)
             &:after
                 content: ""
                 position: absolute
-                top: 30%
-                left: 40%
+                top: 19%
+                left: 31%
                 border-style: solid
                 border-width: 1em 0 1em 1.6em
-                border-color: transparent transparent transparent white
+                border-color: transparent transparent transparent rgba(255, 255, 255, 0.7)
 
 @media (min-width: $medium)
     button
         .embedded
             /* min-height: 50vh */
             min-height: 54vw
+        .blank
+            button
+                &:after
+                    top: 19%
+                    left: 34%
+                    border-width: 1.4em 2.2em 1.5em
         &--image
             &--overlay
                 h2
                     font-size: 4vw
+                    margin-bottom: $ms--7
+                    max-width: 70vw
+                p 
+                    display: block
 </style>