.parentImageDescription{
    
    width:80%;
    height:800px;
    display:flex;
    border:1px solid gray;
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    
    
}



.parentDivFirst {
    width: 85%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    
}

.card {
    width: 260px; 
    height: 400px; 
    box-sizing: border-box; 
    border: 2px solid white;
    margin-bottom: 20px; /* Add space between rows */
}

.card img {
    width: 100%; 
    height: 70%;
    border: 1px solid lightgray;
}

.margintop {
    margin-top: 150px;
}

@media (max-width: 776px) {
    /* Switch to grid layout on smaller screens */
    .card-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap:10px;
    }

    .card {
        width: 100%; /* Full width of the grid cell */
        margin-right: 0; /* Remove extra margin for grid */
    }
    
    /* Adjust other styles for smaller screens */
    .margintop {
        margin-top: 100px;
    }

    /* Any additional styles specific for smaller screens can go here */
}

.graytext {
    font-family: "Poppins", serif;
    font-weight: 400;
    font-size: 13px;
    margin-left: 10px;
    border-bottom: 1px solid #898989;
    width: fit-content;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.powerbank {
    color: black;
    font-size: 15px;
    font-family: "Archivo Black", serif;
    font-weight: 100;
    margin-left: 10px;
}

@media(max-width:776px){
    
    .powerbank{
        
        font-size:10px;
        width:170px;
        
    }
}

.colorclass {
    color: gray;
}