Benefity Grid by HAP v1

by Petr Haluza

HTML

<script src="https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700&amp;family=Lexend+Deca:wght@400;500;600;700;800&amp;display=swap"></script>
<div class="wrapper">

<div id="benefit-list">

	<div class="row">

		<div class="img" style="background-image: url(https://www.holidayscalendar.com/wp-content/uploads/2016/11/National-Relaxation-Day-iStock-620413030.jpg)"></div>

		<div class="ben">
			<div class="bene">
				<h5>5 dnů relax day</h5>
				<div class="sub">nad rámec 20ti dní dovolené</div>
				<p>pro lepší skloubení osobního a pracovního života, je možnost čerpat dalších 5 dnů placeného volna nad rámec zákonných 20 dní dovolené</p>
			</div><!-- /bene -->

			<div class="bene">
				<h5>3 dny sick day</h5>
				<p>Sick days není nic jiného než pracovní volno poskytnuté ke zdravotním účelům</p>
			</div><!-- /bene -->
		</div><!-- /ben -->

	</div><!--/.row -->
	<div class="row">

		<div class="img" style="background-image: url(https://img.freepik.com/free-photo/sports-tools_53876-138077.jpg)"></div>

		<div class="ben">
			<div class="bene">
				<h5>Multisport karta*</h5>
				<p>Volnočasový zaměstnanecký benefit, který vám umožňuje každý den jeden volný či zvýhodněný vstup do partnerské sítě relaxačních a pohybových zařízení po celé ČR, SK a vyzkoušet si tak rozmanitou nabídku aktivit.</p>
			</div><!-- /bene -->

			<div class="bene">
				<h5>Benefitní karta*</h5>
				<p>Benefitní karta je volnočasová "peněženka" kterou můžete nakupovat podobně jako s Vaší běžnou platební kartou v různých oblastech.</p>
			</div><!-- /bene -->
		</div><!-- /ben -->



	</div><!--/.row -->
	<div class="row">

		<div class="img" style="background-image: url(https://haluzovic.cz/megakariera/images/team1.jpg)"></div>

		<div class="ben">
			<div class="bene">
				<h5>Penzijní nebo životní pojištění</h5>
				<p>Přispějeme na penzijní či životní pojištění dle vlastního výběru, anebo pomůžeme s jeho zřízením. </p>
			</div><!-- /bene -->

			<div...

CSS

@import url("https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700&family=Lexend+Deca:wght@400;500;600;700;800&display=swap");

#benefit-list { max-width: 1200px; margin: 0 auto}

#benefit-list div.img {flex-basis: 30%; background-size: cover; background-position: center center; border-radius: 20px; position: relative; overflow:hidden}
#benefit-list div.img:before { content:"";position:absolute; left:0; right:0; top:0; bottom:0; background:linear-gradient(to top, #dfeaf755,#ffffff55 , #dfeaf7ee)}
#benefit-list div.ben {flex-basis: 70%;}

@media (min-width:800px){
	#benefit-list .row { display:flex; flex-wrap:wrap}
	#benefit-list .row:nth-child(even) { flex-direction:row-reverse}
}

#benefit-list .ben { padding: 20px; display: flex; flex-direction: column; gap: 20px; text-align:center}
#benefit-list .bene { padding: 20px; border-radius: 15px; box-shadow:0 0 13px 6px #e4e9f4; display: flex; flex-direction: column; gap: 10px;}

#benefit-list .bene h5 { font-size:25px; font-weight: 700; color:#6663F6; letter-spacing:-1px}
/**/

* { font-family: "Hind", sans-serif; box-sizing: border-box}
.wrapper {background-image: linear-gradient(to top, #F0F4FB00, #F0F4FBFF); padding: 20px 0 }