Adds intermediate usage examples to README

README.md

@@ -89,36 +89,64 @@ Here are some shortcuts for quick access:
 
 ## Examples
 
-> Although the examples below use `atomic-layout` package, they are fully compliant with other styling implementations (i.e. `@atomic-layout/emotion`).
+> Although the examples below use `atomic-layout` package, they are fully compatible with other styling implementations of the library (i.e. `@atomic-layout/emotion`).
 
 ### Basics
 
 <table border="0">
   <tr>
     <td width="33%" valign="top">
       <a href="https://codesandbox.io/s/basic-composition-5mvlr" target="_blank">
-        <img src="materials/example-thumbnails/basic-composition.jpg#" alt="Basic composition: square and circle" />
+        <img src="materials/example-thumbnails/basic-composition.jpg" alt="Basic composition: square and circle" />
         <h4>Basic composition</h4>
       </a>
       <p>Combine two UI elements into a single one using Composition.</p>
     </td>
     <td width="33%" valign="top">
       <a href="https://codesandbox.io/s/responsive-props-8m14f" target="_blank">
-        <img src="materials/example-thumbnails/responsive-props.jpg#" alt="Component with responsive props" />
+        <img src="materials/example-thumbnails/responsive-props.jpg" alt="Component with responsive props" />
         <h4>Responsive props</h4>
       </a>
-      <p>Learn how to change a prop's value depending on a breakpoint.</p>
+      <p>Change a prop's value depending on a breakpoint.</p>
     </td>
     <td width="33%" valign="top">
       <a href="https://codesandbox.io/s/nested-composition-8p8pk" target="_blank">
-        <img src="materials/example-thumbnails/nested-composition.jpg#" alt="Composition of other compositions" />
+        <img src="materials/example-thumbnails/nested-composition.jpg" alt="Composition of other compositions" />
         <h4>Nested composition</h4>
       </a>
       <p>Any element can be a composition <i>and</i> a composite at the same time.</p>
     </td>
   </tr>
 </table>
 
+### Intermediate
+
+<table border="0">
+  <tr>
+    <td width="33%" valign="top">
+      <a href="https://codesandbox.io/s/conditional-rendering-4k90o" target="_blank">
+        <img src="materials/example-thumbnails/conditional-rendering.jpg" alt="Conditional rendering" />
+        <h4>Conditional rendering</h4>
+      </a>
+      <p>Render or display elements conditionally based on breakpoints.</p>
+    </td>
+    <td width="33%" valign="top">
+      <a href="https://codesandbox.io/s/custom-configuration-d01ku" target="_blank">
+        <img src="materials/example-thumbnails/custom-configuration.jpg" alt="Custom configuration" />
+        <h4>Custom configuration</h4>
+      </a>
+      <p>Configure a default measurement unit, custom breakpoints, and responsive behaviors.</p>
+    </td>
+    <td width="33%" valign="top">
+      <a href="https://codesandbox.io/s/atomic-layout-query-d2mdl" target="_blank">
+        <img src="materials/example-thumbnails/shorthand-media-query.jpg" alt="Shorthand media query" />
+        <h4>Shorthand media query</h4>
+      </a>
+      <p>Use a shorthand <code>query</code> function to declare inline media queries in CSS.</p>
+    </td>
+  </tr>
+</table>
+
 ## Materials
 
 <table border="0">