Responsive with Media Queries

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
@media all and (max-width: 600px) {
 h4 {   text-align:center;position:relative;top:-80px;   }
       }
@media all and (min-width: 601px) and (max-width:900px){
 h4 {   text-align:center;position:relative;top:-65px;   }
       }
@media all and (min-width: 901px) and (max-width:1200px) {
 h4 {   text-align:center;position:relative;top:-45px;   }
       }
@media all and (min-width: 1201px) {
 h4 {   text-align:center;position:relative;top:-35px;   }
       }

     #container {   display:flex;width:90%;border:1px solid;top:10px;                   position:absolute;left:50%;transform:translate(-50%);  }
     img {   width:100%;height:300px;  }
     span {   width:20%;border:1px solid;height:300px;padding:2vw;
               margin:2vw;border-radius:10px;    }
</style>
</head>
<body>
<div id='container'>
<span id='shipping'>
<img src='https://cdn.shopify.com/s/files/1/2803/5056/files/Shopptique_Fast_Shipping_Worldwide.svg?9460' title='Shopptique Fast Shipping Worldwide Icon'/>
<h4>Fast Shipping Worldwide</h4></span>
<span id='return'>
<img src='https://cdn.shopify.com/s/files/1/2803/5056/files/Shoppptique_Easy_30-Day_Returns.svg?9463' title='Shopptique Easy 60-Day Returns Icon'/>
<h4>Easy 30-Day Returns</h4></span>
<span id='warranty'>
<img src='https://cdn.shopify.com/s/files/1/2803/5056/files/Shopptique_100_Secure_Checkout.svg?9463' title='Shopptique International Warranty Icon'/>
<h4>International Warranty</h4></span>
<span id='secure'>
<img src='https://cdn.shopify.com/s/files/1/2803/5056/files/Shopptique_International_Warranty.svg?9463' title='Shopptiqu e100% Secure Checkout Icon'/>
<h4>100% Secure Checkout</h4></span>

</div>
</body>
</htm>