*   
{
    margin: 0px;
    padding: 0;
    box-sizing: border-box;
    /* font-family: Arial, sans-serif; */
}

body { display: flex; }
.content { flex: 1; padding: 20px; }

.gallery
{ position: absolute; display: grid; gap: 20px; }

.card
{
    background: rgb(238, 235, 196);
    border-radius: 8px;
    box-shadow:0 0 8px white;
    padding: 8px;
    text-align: center;
}

.card h1 { margin-bottom: 3px; font-size: 21px; }
.card img { object-fit: cover; }
.card p { margin-top: 5px; color:black; }
.card a { text-decoration: none; color: blue;}
.card a:hover { color:red; }
.bottom-Line {font-size: 15px; font-weight: 600;}

/* < 576 | 577 > 767 | 768 > 991 | 992 > 1199 | 1200 > 1399 | > 1400 */
@media(max-width: 460px) /* OK Done */
    { 
        .gallery {left: 1.5%; grid-template-columns: repeat(1, 1fr); 
            margin-top: 70px; margin-left: 7.4px; width: 92.5%; padding-bottom: 15px;} 
        .card a { font-size: 1.1rem;}
        .card {height: 292px;}
        .card img { width: 100%; height: 225px; }
        .card p { font-size: 0.8rem; }
    }
@media(min-width: 461px) and (max-width: 576px) /* OK Done */
    { 
        .gallery {left: 1.5%; grid-template-columns: repeat(1, 1fr); 
            margin-top: 70px; margin-left: 7.4px; width: 95%; padding-bottom: 15px;} 
        .card a { font-size: 1.4rem;}
        .card {height: 402px;}
        .card img { width: 100%; height: 327px; }
        .card p { font-size: 1.1rem; }
    }
@media(min-width: 577px) and (max-width: 767px) /* OK Done */
    { 
        .gallery {left: 1.5%; grid-template-columns: repeat(1, 1fr); 
            margin-top: 70px; margin-left: 7.4px; width: 95%; padding-bottom: 15px;} 
        .card a { font-size: 1.5rem;}
        .card {height: 510px;}
        .card img { width: 100%; height: 428px; }
        .card p { font-size: 1.2rem; }
    }
@media(min-width: 768px) and (max-width: 991px) /* OK Done */
    { 
        .gallery {left: 22.8%; grid-template-columns: repeat(1, 1fr); 
            margin-top: 15px; margin-left: 7.4px; width: 75%; padding-bottom: 15px;} 
        .card a { font-size: 1.6rem;}
        .card {height: 534px;}
        .card img { width: 100%; height: 440px; }
        .card p { font-size: 1.3rem; }
    }
@media(min-width: 992px) and (max-width: 1199px) /* OK Done */
    { 
        .gallery {left: 19.6%; grid-template-columns: repeat(2, 1fr); 
            margin-top: 15px; margin-left: 7.4px; width: 78.4%; padding-bottom: 15px;} 
        .card a { font-size: 1.6rem;}
        .card {height: 345px;}
        .card img { width: 100%; height: 260px; }
        .card p { font-size: 1.03rem; }
    }
@media(min-width: 1200px) and (max-width: 1399px) /* OK Done */
    { 
        .gallery {left: 15.6%; top: 16px; grid-template-columns: repeat(3, 1fr); width: 83.2%; padding-bottom: 20px;} 
        .card a { font-size: 1.2rem;}
        .card {height: 313px;}
        .card img { width: 100%; height: 245px; }
        .card p { font-size: 0.9rem; }
    }
@media(min-width: 1400px)  /* OK Done */
    { 
        .gallery {left: 15.6%; top: 16px; grid-template-columns: repeat(3, 1fr); width: 83.2%; padding-bottom: 20px;} 
        .card a { font-size: 1.2rem;}
        .card {height: 363px;}
        .card img { width: 100%; height: 295px; }
        .card p { font-size: 1.2rem; }
    }