/* CSS-Code hier einfügen */
/* Basic styling for the grid */




.home-recommendation h3 { 
    color: rgb(230, 230, 230);
    /* White text color */
    text-align:center;
    font-size: 1.3rem;
   
}


.home-recommendation {

 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Responsive columns */
 gap: 20px; /* Spacing between grid items */





   
position: relative;
 
 
}

    
    .home-recommendation h2 {
 grid-column: 1 / -1; /* Make the heading span across all columns */


    margin-bottom: 20px;
    }
    
    .guide-card {
    border: 1px solid #1A1A1D;/* Add a border to the cards */
     border-radius: 2px; /* Rounded corners */
     box-shadow: 2px 5px 2px #1A1A1D; /* subtle shadow */
     transition: transform 0.2s; /* smooth transform on hover */
     display: grid;
     height: 89px;
    grid-template-columns: 100px 1fr; /* Image and text side by side */
     float: right;
    align-items: center;
     background-color:#1A1A1D;
     z-index: 100;
     text-decoration: none;
    
    }
    
    .guide-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 16px #1A1A1D;
     text-decoration: none;
     border-color: #7a5af8a1;
    }
    
    .guide-card img {
     width: 100px; /* Fixed width for the image */
     height: 89px; /* Fixed height for the image */
     border-radius: 4px;
     margin-right: 15px; /* Space between image and text */
     object-fit: cover; /* Maintain aspect ratio and cover container */
     flex-shrink: 0; /* Prevent image from shrinking */
    }
    
    
    
    .guide-card h3 {
     font-size: 1.2rem;
     text-align: left;
     margin-left: 2.5rem;

    }
    
    .guide-card p {
      font-size: 1.2rem;
     color: rgb(230, 230, 230)
     ;
    }
    
    

    
    @media (max-width: 800px) {
      .home-recommendation {
        /* Statt 400px nun 300px Mindestbreite */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      }
    }
    

    footer {
      background-color: rgba(34, 24, 36, 0)
      ;
      
      text-align: center;
      padding: 20px;
      margin-top: 50px;
    }