+
+ filter: brightness(85%);
+
+ .play-overlay {
+ opacity: 1;
+
+ transform: translate(-50%, -50%) scale(1);
+ }
+ }
+
+ &.focus-visible {
+ box-shadow: 0 0 0 2px var(--mainColor);
+ }
+
+ img {
+ width: $video-thumbnail-width;
+ height: $video-thumbnail-height;
+
+ &.blur-filter {
+ filter: blur(5px);
+ transform : scale(1.03);
+ }
+ }
+
+ .play-overlay {
+ width: 0;
+ height: 0;
+
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%) scale(0.5);
+
+ transition: all $play-overlay-transition;
+
+ border-top: ($play-overlay-height / 2) solid transparent;
+ border-bottom: ($play-overlay-height / 2) solid transparent;
+
+ border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
+
+ opacity: 0;