2 col on desktop and 1 col mobile

[lill77]

Hi im trying to get this card css code to work 2 col on desktop and 1 col mobile . Im adding it as html onto a Shopify page ?

Any help would be great , thanks.

here is the code i have

<meta name="viewport" content="width=device-width, initial-scale=1">



<style>



.container-home{
width: 100%;

}

.container-home .card{
position: relative;
cursor: pointer;
}

.container-home .card .face{
width: 50%;
height: 500px;
transition: 0.5s;
}

.container-home .card .face.face1{
position: relative;
background: #fff;
justify-content: center;
align-items: center;
z-index: 1;
transform: translateY(250px);
flex-direction: row;
flex-wrap: wrap;
}

.container-home .card:hover .face.face1{
background: #84A6BC;
transform: translateY(0);
}

.container-home .card .face.face1 .content{
opacity: 1;
transition: 0.5s;
}

.container-home .card:hover .face.face1 .content{
opacity: 1;
}

.container-home .card .face.face1 .content img{
max-width: 100px;
}

.container-home .card .face.face1 .content h3{
margin: 10px 0 0;
padding: 0;
color: darkgrey;
text-align: center;
font-size: 1.5em;
}

.container-home .card .face.face2{
position: relative;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
transform: translateY(-100px);
}

.container-home .card:hover .face.face2{
transform: translateY(0);
}

.container-home .card .face.face2 .content p{
margin: 0;
padding: 0;
}

.container-home .card .face.face2 .content a{
margin: 15px 0 0;
display: inline-block;
text-decoration: none;
font-weight: 700;
padding: 10px;
border: 0.5px solid #333;
}

.container-home .card .face.face2 .content a:hover{
background: #d56227;
color: #fff;
}





</style>




<div class="container-home">
<div class="card">
<div class="face face1">
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/0607/9073/5048/files/66859-200.png?v=1663239145">
<h3>Design...</h3>
</div>
</div>
<div class="face face2">
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
<a href="#" class="button-home">Take me there</a>
</div>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/0607/9073/5048/files/66859-200.png?v=1663239145">
<h3>Select...</h3>
</div>
</div>
<div class="face face2">
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
<a href="#">Take me there</a>
</div>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/0607/9073/5048/files/66859-200.png?v=1663239145">
<h3>Supply...</h3>
</div>
</div>
<div class="face face2">
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
<a href="#">Take me there</a>
</div>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<img src="https://cdn.shopify.com/s/files/1/0607/9073/5048/files/66859-200.png?v=1663239145">
<h3>Install...</h3>
</div>
</div>
<div class="face face2">
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at.</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>