Fix media and columns

_includes/blocks/media.liquid

@@ -4,6 +4,7 @@
 {% endif %}
 {% if include.type == "image" %}
 <picture
+	class="content"
 	src="{{ include.url | absolute_url }}"
 	{% if include.width %}width="{{ include.width }}"{% endif %}
 	{% if include.height %}height="{{ include.height }}"{% endif %}>
@@ -14,6 +15,7 @@
 </picture>
 {% elsif include.type == "video" %}
 <video controls
+	class="content"
 	{% if include.poster %}poster="{{ include.poster | absolute_url }}"{% endif %}
 	{% if include.preload %}preload="{{ include.preload }}"{% endif %}
 	src="{{ include.url | absolute_url }}"
@@ -26,6 +28,7 @@
 </video>
 {% elsif include.type == "audio" %}
 <audio controls
+	class="content"
 	{% if include.preload %}preload="{{ include.preload }}"{% endif %}
 	src="{{ include.url | absolute_url }}"
 	{% if include.width %}width="{{ include.width }}"{% endif %}

_sass/_block-columns.scss

@@ -6,7 +6,7 @@
 .block-columns > .content {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 3 - 5rem), 1fr));
-	grid-column-gap: 1rem;
+	grid-column-gap: 0rem;
 	grid-row-gap: 1rem;
 }
 

_sass/_block-media.scss

@@ -1,6 +1,13 @@
 // --------------------------------------------------------------------------------
 // Block: Media
 // --------------------------------------------------------------------------------
+.block-media {
+}
+
+.block-media > a > .content,
+.block-media > .content {
+}
+
 .block-media > figcaption {
 	display: block;
 	margin: 0;
@@ -28,3 +35,8 @@
 // --------------------------------------------------------------------------------
 // Block: Media > Picture
 // --------------------------------------------------------------------------------
+.block-media > a > .content > img,
+.block-media > .content > img {
+	display: block;
+	width: 100%;
+}