chore: spacing

src/assets/styles/base/index.css

@@ -183,9 +183,12 @@ h5 { font-size: var(--font-size-md) }
 h6 { font-size: var(--font-size-sm) }
 
 .section-header-wrapper {
-  display: flex;
-  flex-direction: column;
   justify-content: space-between;
+  margin: var(--sizing-xl) 0 var(--sizing-lg);
+
+  & .section-header {
+    margin: 0;
+  }
 }
 
 .section-header {
@@ -201,14 +204,12 @@ h6 { font-size: var(--font-size-sm) }
 }
 
 .section-header-buttons {
-  margin: 0 0 var(--sizing-lg);
+  display: flex;
+  align-items: center;
+  gap: var(--sizing-sm);
 
   & > button {
-    margin-bottom: var(--sizing-sm) !important;
-
-    &:last-of-type {
-      margin-right: 0 !important;
-    }
+    margin-bottom: 0 !important;
   }
 }
 
@@ -604,14 +605,6 @@ li {
     max-width: 768px;
   }
 
-  .section-header-wrapper {
-    flex-direction: row;
-  }
-
-  .section-header-buttons {
-    margin: var(--sizing-md) 0 var(--sizing-lg);
-  }
-
   footer nav.social {
     gap: var(--sizing-md);
   }

src/assets/styles/components/buttons.css

@@ -14,7 +14,7 @@ button {
     background-color: var(--accent-color);
     appearance: none;
     border: 2px solid var(--accent-color);
-    transition-property: all;
+    transition-property: border;
   }
 
   &:not(.theme-toggle, .active):hover,
@@ -27,17 +27,23 @@ button {
     transition-duration: var(--transition-duration-default);
   }
 
-  &:not(.active):hover,
-  &:not(.active):active,
   &:not(.active):focus,
   &:not(.active):focus-within {
+    transition-property: none;
     outline: 2px dashed var(--accent-color);
+    padding: calc(var(--sizing-sm) + 2px) calc(var(--sizing-lg) + 2px);
+    border: 0;
   }
 
   &.small {
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
     padding: var(--sizing-xs) var(--sizing-sm);
+
+    &:not(.active):focus,
+    &:not(.active):focus-within {
+      padding: var(--sizing-xs) calc(var(--sizing-sm) + 2px);
+    }
   }
 
   &.secondary {

src/assets/styles/components/media-grid.css

@@ -50,11 +50,15 @@
   }
 
   & a:hover img,
-  & a:focus img,
   & a:active img {
     border-color: var(--accent-color-hover)
   }
 
+  & a:focus img,
+  & a:focus-within img {
+    border: 0
+  }
+
   & .meta-text {
     position: absolute;
     z-index: 2;