Add margins to the images in projects

sass/_responsive.scss

@@ -52,7 +52,7 @@ main {
         }    
     }
 
-    @media screen and (max-width: $break-small) {
+    @media screen and (max-width: $break-medium) {
         .filter-buttons {
             overflow: auto; /* Phone: scrollbar for filter buttons*/
             justify-content: flex-start;

sass/projects.scss

@@ -41,6 +41,7 @@ span.colorful {
 
 .project-cards-row {
     overflow: hidden;
+    margin: 0 clamp(0.5rem, 2vw, 10rem);
 
     .project-card {
         position: relative;

templates/projects.html

@@ -18,7 +18,7 @@
     <ul>
       <li>
         <a href="/">
-          <img class="portrait-menu-item" src="{{ get_url(path='images/portrait2.jpg') }}" alt="Portrait" />
+          <img class="portrait-menu-item" src="{{ get_url(path='images/projects/portrait2.jpg') }}" alt="Portrait" />
         </a>
       </li>
       {% for item in config.extra.nav %}
@@ -46,7 +46,7 @@ <h2 class="presentation-text"><span class="colorful">Check</span> Out <span clas
 
     <div class="project-card col-12 col-md-6 col-xl-4 animate__animated animate__bounceInLeft">
       <div class="project-image">
-        <img src="{{ get_url(path='images/FitCal.png') }}" alt="FitCal" />
+        <img src="{{ get_url(path='images/projects/FitCal.png') }}" alt="FitCal" />
         <div class="project-details-overlay">
           <h3 class="card-title">FitCal</h3>
           <p class="card-technology">Angular | TypeScript | Java (Spring)</p>
@@ -57,7 +57,7 @@ <h3 class="card-title">FitCal</h3>
 
     <div class="project-card col-12 col-md-6 col-xl-4 animate__animated animate__bounceIn">
       <div class="project-image">
-        <img src="{{ get_url(path='images/Sympho.png') }}" alt="Sympho" />
+        <img src="{{ get_url(path='images/projects/Sympho.png') }}" alt="Sympho" />
         <div class="project-details-overlay">
           <h3 class="card-title">Sympho</h3>
           <p class="card-technology">JavaScript | Node | Vexflow.js</p>
@@ -68,7 +68,7 @@ <h3 class="card-title">Sympho</h3>
 
     <div class="project-card col-12 col-md-6 col-xl-4 animate__animated animate__bounceInRight">
       <div class="project-image">
-        <img src="{{ get_url(path='images/LeagueOfPokemon/AI4Crop.png') }}" alt="League of Pokemon" />
+        <img src="{{ get_url(path='images/projects/LeagueOfPokemon.png') }}" alt="League of Pokemon" />
         <div class="project-details-overlay">
           <h3 class="card-title">League of Pokemon</h3>
           <p class="card-technology">Java</p>
@@ -79,7 +79,7 @@ <h3 class="card-title">League of Pokemon</h3>
 
     <div class="project-card col-12 col-md-6 col-xl-4 animate__animated animate__bounceInLeft">
       <div class="project-image">
-        <img src="{{ get_url(path='images/AndroidDepartmentQuest.jpg') }}" alt="AndroidDepartmentQuest" />
+        <img src="{{ get_url(path='images/projects/AndroidDepartmentQuest.jpg') }}" alt="AndroidDepartmentQuest" />
         <div class="project-details-overlay">
           <h3 class="card-title">Department Quest</h3>
           <p class="card-technology">Java (Android)</p>
@@ -90,7 +90,7 @@ <h3 class="card-title">Department Quest</h3>
 
     <div class="project-card col-12 col-md-6 col-xl-4 animate__animated animate__bounceIn">
       <div class="project-image">
-        <img src="{{ get_url(path='images/Inventory.png') }}" alt="Inventory" />
+        <img src="{{ get_url(path='images/projects/Inventory.png') }}" alt="Inventory" />
         <div class="project-details-overlay">
           <h3 class="card-title">Inventory</h3>
           <p class="card-technology">JavaScript | Node | MongoDB</p>
@@ -101,7 +101,7 @@ <h3 class="card-title">Inventory</h3>
 
     <div class="project-card col-12 col-md-6 col-xl-4 animate__animated animate__bounceInRight">
       <div class="project-image">
-        <img src="{{ get_url(path='images/CoreLink2.png') }}" alt="CoreLink" />
+        <img src="{{ get_url(path='images/projects/CoreLink2.png') }}" alt="CoreLink" />
         <div class="project-details-overlay">
           <h3 class="card-title">CoreLink</h3>
           <p class="card-technology">React | Module Federation | Turborepo</p>