.center-div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}body{margin:0}.cards{display:flex;flex-wrap:wrap;justify-content:space-between}.card{flex:0 1 calc(25% - 1em);line-height:1.5;margin-bottom:1em;width:300px;height:300px;background-color:#fff;border-radius:10px;box-shadow:0 2px 5px #0000001a;overflow:hidden;position:relative}.card-image{width:100%;height:auto;object-fit:cover;transition:all .3s ease-in-out}.card-image:hover{opacity:.7;cursor:pointer}.card-text{position:absolute;bottom:0;width:100%;background-color:#00000080;color:#fff;padding:20px;text-align:center}.card-button{display:inline-block;background-color:#007bff;color:#fff;padding:10px 20px;border:none;cursor:pointer;transition:all .3s ease-in-out}.card-button:hover{background-color:#0056b3}