basic-grid.css

 /* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .basic-grid {
    display: grid;
    gap: 1rem;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(10vw, 1fr));
    
}
.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgb(63,94,251);
    background: linear-gradient(0deg, rgba(34,193,195,.2) 0%, rgba(253,187,45,.1) 100%);
    font-size: 2vw;
    color: rgb(255, 255, 255);
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 100ms;
    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
 }
  
.card:hover {
    background: #0000007b;
    box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
    overflow: hidden;
 }
}

/* Extra small devices (phones, 768px and down) */
@media only screen and (max-width: 768px) {
    .basic-grid {
    display: grid;
    gap: 2rem;
    height: 90vh;
    overflow: hidden;
    grid-template-rows: repeat(auto-fit, minmax(10vh, 1fr));
    padding-top: 50px;
    align-content: center;

 }
 .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgb(63,94,251);
    background: linear-gradient(0deg, rgba(34,193,195,.2) 0%, rgba(253,187,45,.1) 100%);
    font-size: 6vw;
    color: #fff;
    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: all 100ms;
    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
 }
  
.card:hover {
    background: #0000007b;
    box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
    overflow: hidden;
 }
}