Content

<style>

 .tile-row {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 15px;
   margin-bottom: 20px;
 }
 
 .tile-halves {
   width: calc(33.33% - 15px);
   min-width: 150px;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   background-color: #fff;
   margin-bottom: 15px;
 }
 
 .tile-halves:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 16px rgba(0,0,0,0.15);
 }
 
 .tile-image {
   width: 100%;
   height: auto;
   overflow: hidden;
 }
 
 .tile-image img {
   width: 100%;
   height: auto;
   transition: transform 0.5s ease;
   display: block;
 }
 
 .tile-halves:hover .tile-image img {
   transform: scale(1.05);
 }
 
 .tile-bottom {
   padding: 10px;
   background-color: #202020;
   text-align: center;
 }
 
 .link-button h2 {
   margin: 0;
   font-size: 18px;
   color: #caaa61;
   font-weight: 600;
   padding: 5px 0;
 }
 
 @media (max-width: 768px) {
   .tile-halves {
     width: calc(50% - 15px);
   }
 }
 
 @media (max-width: 480px) {
   .tile-halves {
     width: 100%;
   }
 }

</style>

Rules