redefinition of SingleProject classes

src/components/SingleProject/SingleProject.css

@@ -14,7 +14,7 @@
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }
 
-.single-project-left {
+.single-project-top {
     position: relative;
     flex-shrink: 0;
     width: 100%;
@@ -25,7 +25,7 @@
     height: 210px;
 }
 
-.single-project-left img {
+.single-project-top img {
     width: 100%;
     height: auto;
     display: block;
@@ -34,11 +34,11 @@
     object-fit: cover;
 }
 
-.single-project-left img.fade-out {
+.single-project-top img.fade-out {
     opacity: 0;
 }
 
-.single-project-right {
+.single-project-bottom {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -47,17 +47,17 @@
     height: 100%;
 }
 
-.single-project-right-top {
+.single-project-bottom-header {
     margin-bottom : 1em;
 }
 
-.single-project-right-top-title{
+.single-project-title-wrapper{
     display: flex;
     margin-left: 2rem;
     width: 100%;
 }
 
-.single-project-right-bottom {
+.single-project-bottom-container {
     margin-left: 2rem;
     display: flex;
     flex-direction: column;
@@ -159,12 +159,12 @@
     right: 10px;
 }
 
-.single-project-left:hover .arrow {
+.single-project-top:hover .arrow {
     display: flex;
 }
 
 
-.single-project-right-top-date{
+.single-project-years{
     color : var(--text-color);
     margin : 0;
     margin-left : 2em;