fix: improvements from recording 9.3.2025

Author: danieldanielecki

README.md

@@ -2944,54 +2944,54 @@ A fluid grid layout adjusts its column widths and spacing proportionally based o
 
 ```css
 .container {
-    background-color: #ff0000;
-    width: 90%; /* Set container width to 90% of the viewport */
-    margin: 0 auto; /* Center the container */
+  background-color: #ff0000;
+  width: 90%; /* Set container width to 90% of the viewport */
+  margin: 0 auto; /* Center the container */
 }
 
 .column {
-    background-color: #f1f1f1;
-    float: left;
-    width: 30%; /* Set column width to 30% of the container */
-    margin-right: 5%; /* Add 5% margin between columns */
+  background-color: #f1f1f1;
+  float: left;
+  width: 30%; /* Set column width to 30% of the container */
+  margin-right: 3.33%; /* Add 5% margin between columns */
 }
 
 /* Apply clearfix to clear floats */
 .container:after {
-    content: "";
-    display: table;
-    clear: both;
+  content: "";
+  display: table;
+  clear: both;
 }
 ```
 
 [![Edit 072-Fluid Grids](images/codesandbox.svg)](https://codesandbox.io/p/sandbox/072-fluid-grids-qxh5zz)
 
 [^72]CodeSandbox: Fluid Grids.
 
-[^72]:[CodeSandbox: Fluid Grids](https://qxh5zz.csb.app/), last access: June 20, 2024.
+[^72]:[CodeSandbox: Fluid Grids](https://qxh5zz.csb.app/), last access: March 9, 2025.
 
 ###### Media Queries
 
 Media queries allow you to apply specific styles based on the characteristics of the viewport, such as its width or orientation. This enables you to create responsive designs that adapt to different screen sizes.
 
 ```css
 .column {
-    background-color: #f1f1f1;
+  background-color: #f1f1f1;
 }
 
 /* Apply styles for screens larger than 768px */
 @media screen and (min-width: 768px) {
-    .column {
-        width: 45%; /* Adjust column width for larger screens */
-    }
+  .column {
+    width: 45%; /* Adjust column width for larger screens */
+  }
 }
 ```
 
 [![Edit 073-Media Queries](images/codesandbox.svg)](https://codesandbox.io/p/sandbox/073-media-queries-dwprjz)
 
 [^73]CodeSandbox: Media Queries.
 
-[^73]:[CodeSandbox: Media Queries](https://dwprjz.csb.app/), last access: June 20, 2024.
+[^73]:[CodeSandbox: Media Queries](https://dwprjz.csb.app/), last access: March 9, 2025.
 
 ##### Flexible Units
 

__presentation-slides/index.html

@@ -1850,23 +1850,23 @@ <h1 id="heading">JavaScript Example</h1>
 
 ```css[|1|5|1,5|3|4|7|12|7,12|10|11|14-19]
 .container {
-    background-color: #ff0000;
-    width: 90%; /* Set container width to 90% of the viewport */
-    margin: 0 auto; /* Center the container */
+  background-color: #ff0000;
+  width: 90%; /* Set container width to 90% of the viewport */
+  margin: 0 auto; /* Center the container */
 }
 
 .column {
-    background-color: #f1f1f1;
-    float: left;
-    width: 30%; /* Set column width to 30% of the container */
-    margin-right: 5%; /* Add 5% margin between columns */
+  background-color: #f1f1f1;
+  float: left;
+  width: 30%; /* Set column width to 30% of the container */
+  margin-right: 3.33%; /* Add 5% margin between columns */
 }
 
 /* Apply clearfix to clear floats */
 .container:after {
-    content: "";
-    display: table;
-    clear: both;
+  content: "";
+  display: table;
+  clear: both;
 }
 ```
 
@@ -1880,14 +1880,14 @@ <h1 id="heading">JavaScript Example</h1>
 
 ```css[|5|6|10|6,10|7-9]
 .column {
-    background-color: #f1f1f1;
+  background-color: #f1f1f1;
 }
 
 /* Apply styles for screens larger than 768px */
 @media screen and (min-width: 768px) {
-    .column {
-        width: 45%; /* Adjust column width for larger screens */
-    }
+  .column {
+    width: 45%; /* Adjust column width for larger screens */
+  }
 }
 ```