make tour cards text readable

web/style.css

@@ -142,20 +142,17 @@ p {
     margin-top: 50px;
     max-width: 2000px;
     gap: 2rem;
-
+    display: flex;
-
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: min-content min-content min-content min-content;
-    grid-auto-rows: 300px;
     transition: .2s linear;
-
-
 }
 
 .tourcard {
     position: relative;
     overflow: hidden;
+    padding: 100px 16px 16px 16px;
+    display: flex;
+    justify-content: flex-end;
+    max-width: calc(50% - 1rem);
 }
 
 @media only screen and (max-width: 801px) {
@@ -166,18 +163,25 @@ p {
 
 .tourcard>img {
     width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
+}
+
+.tourcard p {
+    color: inherit;
+    text-decoration: none;
 }
 
 .tour-text {
-    position: absolute;
+    /* position: absolute; */
-    width: 80%;
+    padding: 16px;
-    bottom: 8%;
-    left: 8%;
-    padding: 2%;
     font-family: Montserrat;
     font-size: .7em;
     background: white;
-    max-height: 80%;;
 }
 
 .counter {