*::after,
*::before,
* {
    margin:0;
    box-sizing:border-box;
}
body {
    color: hsl(234, 12%, 34%);
    font-size: 15px;
    font-family:"Poppins",sans-serif;
    font-weight: 400;
}
img{
    width: 100%;
    max-width: 100%;
    object-fit: contain;
}
.container {
    width: 86%;
    margin: 0 auto;
}
.row {
    display: block;
    margin-inline: auto;
}
.head {
margin: 3rem
auto 4rem auto;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.h-head {
    font-weight: 200;
}
.bold {
    font-weight: 600;
    margin-bottom:  .9rem;
}
.main-tile{
    width: 100%;
    max-width: 300px;
    position: relative;
    overflow: hidden;
}
.tile{
    padding: 1.5em;
    margin-bottom: 2rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background-color:  hsl(0, 0%, 100%);
    box-shadow: -4px 9px 19px 0px hsl(212, 6%, 44%);
}

.red {
    border-top:5px solid hsl(0, 78%, 62%);
}
.brown {
    border-top:5px solid hsl(34, 97%, 64%);
}
.cyan {
    border-top: 5px solid hsl(180, 62%, 55%);
}
.blue {
    border-top:5px solid hsl(212, 86%, 64%)
}

.tile-h {
    margin-bottom: .4rem;
    margin-top: .8rem;
    font-weight: 600;
}
.tile .icon{
    width: 32%;
    margin-top: 3rem;
    margin-bottom: 0.4rem;
   display: block;
   margin-left: auto;
}

.row {
    margin-bottom: 7rem;
}
@media (min-width:32rem) {
    .head {
        text-align: center;
        max-width: 500px;
    }
    .row{
        display: flex;
        gap:32px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .tile {
        width: 300pc !important;
    }
    .sub-row{
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
}