diff --git a/src/timelines/MediaAttachmentGrid.css b/src/timelines/MediaAttachmentGrid.css
index 6b659c4..8811f49 100644
--- a/src/timelines/MediaAttachmentGrid.css
+++ b/src/timelines/MediaAttachmentGrid.css
@@ -4,6 +4,7 @@
   margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
   margin-right: var(--card-pad, 0);
   gap: 4px;
+  contain: layout style;
 
   > :where(img, video) {
     max-height: 35vh;
diff --git a/src/timelines/toot-components/PreviewCard.css b/src/timelines/toot-components/PreviewCard.css
index 17d9f2b..a62c17c 100644
--- a/src/timelines/toot-components/PreviewCard.css
+++ b/src/timelines/toot-components/PreviewCard.css
@@ -1,7 +1,7 @@
 .PreviewCard {
   display: block;
   border: 1px solid #eeeeee;
-  background-color: var(--tutu-color-surface);
+  background-color: var(--tutu-color-surface-d);
   text-decoration: none;
   border-radius: 4px;
   overflow: hidden;
@@ -13,16 +13,16 @@
   overflow: hidden;
   z-index: 1;
   position: relative;
+  contain: layout style;
 
   >img {
-    background-color: #eeeeee;
+    background-color: var(--tutu-color-surface);
     max-width: 100%;
     height: auto;
   }
 
   &:hover,
   &:focus-visible {
-    background-color: var(--tutu-color-surface-d);
     color: var(--tutu-color-on-surface);
 
     >h1 {
diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css
index ecd74a1..b79f896 100644
--- a/src/timelines/toot.module.css
+++ b/src/timelines/toot.module.css
@@ -46,6 +46,7 @@
   align-items: flex-start;
   gap: 8px;
   margin-bottom: 8px;
+  contain: layout style;
 
   > :not(:first-child) {
     flex-grow: 1;