blue banner h376

by ian_smithz

HTML

<link rel="stylesheet" href="https://cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.278/images/general/assets/css/home-page.css?yocs=p_t_u_">
<link rel="stylesheet" href="https://cdn-fsly.yottaa.net/581cc04c2bb0ac43a7000001/www.screwfix.com/v~4b.278/assets/css/sfx.min.css?yocs=p_t_u_">
<style>
  body {
    background: yellow
  }

</style>
<main id="container-main" class="wrp">
  <div class="inner">






    <div class="hp-supplied-safe">
    
      <div class="hp-supplied-safe-wrapper">
        
        <a href="//www.screwfix.com/help/disruption" class="" title="" tabindex="-1">
        
          <h3>KEEPING YOU SUPPLIED <span>AND SAFE</span></h3>
          <div class="hp-supplied-safe-content-wrapper">


            <div class="icon-box">


             <p>
                We have over 20,000 products available to order for Home Delivery or <span class="d-inline-block">Click & Collect</span></p>


      
                <svg id="phone" xmlns="http://www.w3.org/2000/svg" width="717.609" height="1235.51" viewBox="0 0 717.609 1235.51">
                  <g id="Group_126" data-name="Group 126" transform="translate(15724.34 20112.57)">
                    <path id="Path_149" data-name="Path 149" d="M1525.41,2265.34H903.15V1461.09h622.26Zm-309.94,181.83c-39.5,0-71.52-31.32-71.52-69.94s32-69.93,71.52-69.93,71.53,31.31,71.53,69.93-32,69.94-71.53,69.94m-83.44-1084h164.5v21H1132Zm324-89.74H974.92c-65.31,0-118.26,51.77-118.26,115.63V2393.3c0,63.87,53,115.64,118.26,115.64H1456c65.32,0,118.27-51.77,118.27-115.64V1389.07c0-63.86-53-115.63-118.27-115.63" transform="translate(-16581 -21386)" fill="#fff" />
                    <path id="Path_150" data-name="Path 150" d="M995.32,1517.75h-39.8a12.81,12.81,0,0,0-12.35,6.53c-5,8.34,1.26,20.29,1.26,20.29l17.18,27.8a4.17,4.17,0,0,1,.43,4.5,4.06,4.06,0,0,1-3.66,1.89H940l5,26.13h40.79a14.57,14.57,0,0,0,14.37-8.79c4.32-9.16-1.77-17.34-1.77-17.34l-17.18-31.85a1.91,1.91,0,0,1,0-1.77,1.56,1.56,0,0,1,1.35-.53h17.77Z"...

CSS

.hp-supplied-safe {
  background-color: #0053a0;
  margin: 0 -0.3em;
}

.homepage_carousel .hp-supplied-safe-wrapper {
    margin-top: 30px;
}

.hp-supplied-safe-wrapper {
    margin-bottom: 12px;
}

.hp-supplied-safe a {
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
  border: 7px solid #fff;
  text-decoration: none;
}

@media (min-width: 641px) {
  .hp-supplied-safe a {
    border: 11px solid #fff;
  }
}

.hp-supplied-safe-wrapper {
  border: 1px solid #d1d1d1;
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .2);
  height: 205px;
}

@media (min-width: 641px) {
  .hp-supplied-safe-wrapper {
	    /*height: 356px;*/
    height: 376px;
  }
}

.hp-supplied-safe-content-wrapper {
  padding: 0 5%;
}

.hp-supplied-safe h3 {
  background: white;
  color: #0053a0;
  padding: 12px 5%;
  margin: 10px 0;
  font-family: 'screwfix_betaheavy', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.2;
  text-align: center;
}

@media (min-width: 400px) {
  .hp-supplied-safe h3 {
    font-size: 22px;
    text-align: left;
    margin: 18px 0;
  }
}

@media (min-width: 641px) {
  .hp-supplied-safe h3 {
    font-size: 46px;
    font-size: 5vw;
    margin: 24px 0;
  }
}

@media (min-width: 768px) {
  .hp-supplied-safe h3 {
    font-size: 6vw;
  }
}

@media (min-width: 1025px) {
  .hp-supplied-safe h3 {
    font-size: 60px;
  }
}

@media (min-width: 1240px) {
  .hp-supplied-safe h3 {
    font-size: 68px;
  }
}

.hp-supplied-safe h3 span {
  color: #ed1c24;
  display: inline-block;
}

.hp-supplied-safe p {
  color: #fff;
  font-family: 'screwfix_betaheavy', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.3;
  flex: 1 0 60%;
}

@media (min-width: 480px) {
  .hp-supplied-safe p {
    font-size: 22px;
    line-height: 1.2;
  }
}

@media (min-width: 600px) {
  .hp-supplied-safe p {
    font-size: 23px;
    flex: 1 0 40%;
  }
}

@media (min-width: 641px) {
  .hp-supplied-safe p {
    font-size: 31px;
    line-height: 1.2;
  }
}

@media...