From 96ea6d25e1943049d9839fef45e0e6fd78ba60d9 Mon Sep 17 00:00:00 2001
From: Sean Mitchell <sean@37signals.com>
Date: Thu, 3 Oct 2024 14:27:53 -0700
Subject: [PATCH] Update video style

---
 _sass/modules/_video.scss | 28 ++++++++--------------------
 1 file changed, 8 insertions(+), 20 deletions(-)

diff --git a/_sass/modules/_video.scss b/_sass/modules/_video.scss
index cfe25f9..1d32ad0 100755
--- a/_sass/modules/_video.scss
+++ b/_sass/modules/_video.scss
@@ -2,33 +2,26 @@
 
   display: flex;
   flex-direction: column;
-  padding-left: var(--space-medium);
-  padding-right: var(--space-medium);
-  padding-top: var(--space-large);
+  padding: var(--space-large) var(--space-medium) 0 var(--space-medium);
 
   &__content {
 
+    border-radius: 0.2em;
     display: flex;
     margin-inline: auto;
+    overflow: hidden;
     position: relative;
     width: min(100%, 35em);
 
     video {
-      border-radius: 0.3em;
       display: block;
-      overflow: hidden;
     }
 
     button {
 
-      border-radius: 0.3em;
       cursor: pointer;
-      height: 100%;
-      left: 0;
+      inset: 0;
       position: absolute;
-      overflow: hidden;
-      top: 0;
-      width: 100%;
       z-index: 1;
 
       &:before {
@@ -39,34 +32,29 @@
         );
         border-radius: 0.3em;
         content: '';
-        height: 100%;
-        left: 0;
-        overflow: hidden;
+        inset: 0;
         pointer-events: none;
         position: absolute;
-        top: 0;
         transition: opacity var(--transition-slow);
-        width: 100%;
       }
 
       span {
         backdrop-filter: blur(5px);
         -webkit-backdrop-filter: blur(5px);
-        background: url('../images/play.svg') center center no-repeat rgba(var(--rgb-white), 0.7);
-        background-size: 0.8em 0.8em;
+        background: url('../images/play.svg') center center / 0.65em auto no-repeat rgba(var(--rgb-white), 0.8);
         border-radius: 100%;
         box-shadow:
           0 20px 30px -20px rgba(var(--rgb-black), 0.3),
           0 10px 20px -10px rgba(var(--rgb-black), 0.5)
         ;
         display: inline-flex;
-        height: 2.3em;
+        height: 2.2em;
         position: relative;
         transition:
           background-color var(--transition-slow),
           transform var(--transition-slow)
         ;
-        width: 2.3em;
+        width: 2.2em;
         will-change: transform;
       }