Benefity Grid by HAP v1

by Petr Haluza

HTML

<div class="benefit-list">
  <div class="jedna">
		<h5>5 dnů relax day</h5>
		<div class="sub">nad rámec 20ti dní dovolené</div>
		<div class="content">
				<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>
  </div><!-- /1 -->
  <div class="dve">
		<h5>3 dny sick day</h5>
		<div class="content">
				<p>Sick days není nic jiného než pracovní volno poskytnuté ke zdravotním účelům</p>
			</div>
  </div><!-- /2 -->
  <div class="tri">
		<h5>Multisport karta*</h5>
		<div class="content">
				<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>
  </div><!-- /3 -->
  <div class="ctyri">
		<h5>Benefitní karta*</h5>
		<div class="content">
				<p>Co je to benefitní karta? Je to volnočasová "peněženka" kterou můžete nakupovat podobně jako s Vaší běžnou platební kartou v různých oblastech.</p>
			</div>
  </div><!-- /4 -->
  <div class="pet">
		<h5>Penzijní nebo životní pojištění</h5>
		<div class="content">
				<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>
  </div><!-- /5 -->
  <div class="sest">
		<h5>Zvýhodněné nákupy</h5>
		<div class="content">
				<p>Možnost zakoupit zboží z našeho sortimentu za zaměstnanecké ceny.</p>
			</div>
  </div><!-- /6 -->
  <div class="sedm">
		<h5>Firemní akce a teambuildingy</h5>
		<div class="content">
				<p>Rádi si dopřejeme firemní večírek, či rovnou celý víkend s kolegy ze všech oddělení.</p>
			</div>
  </div><!-- /7 -->
  <div class="osm">
		<h5>Odměny za doporučení</h5>
		<div class="content">
				<p>Přiveď do firmy nového kolegu a odměníme tě finančním bonusem.</p>
			</div>
  </div><!-- /8 -->
</div>

CSS

.benefit-list { max-width: 1700px; margin: 0 auto}
@media (max-width:699.9px){ .benefit-list > div { margin-bottom: 4px}}
@media (min-width:700px){
	.benefit-list { display: grid; gap: 4px 4px}
	.benefit-list { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-flow: row; grid-template-areas:
    ". jedna"
    "dve jedna"
    "dve tri"
    "ctyri tri"
    "ctyri pet"
    "sest pet"
    "sest sedm"
    "osm sedm"
    "osm .";}
}
@media (min-width:1200px){
	.benefit-list { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-flow: row; grid-template-areas:
    ". jedna . ."
    "tri jedna dve dve"
    "tri ctyri ctyri pet"
    "sest sest sedm pet"
    ". osm sedm ."
    ". osm . .";}
}

.benefit-list > div { padding: 25px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: end;
/*box-shadow: 0 50px 50px inset white, 10px 20px 30px #f7f7f7;*/}
/*.benefit-list > div:hover { z-index: 10;}*/
.benefit-list > div:before { content:""; z-index: -1; position: absolute; top:0; left:0; bottom:0; right:0; background-size:cover; opacity:.2}
.benefit-list .jedna { grid-area: jedna; }.benefit-list .dve { grid-area: dve; }.benefit-list .tri { grid-area: tri; }.benefit-list .ctyri { grid-area: ctyri; }.benefit-list .pet { grid-area: pet; }.benefit-list .sest { grid-area: sest; }.benefit-list .sedm { grid-area: sedm; }.benefit-list .osm { grid-area: osm; }

.benefit-list .jedna:before { background-image: url("https://ucbbbccd65ec35e7ce3d8e7ae0eb.dl.dropboxusercontent.com/cd/0/inline/CW_Aj3ZSQZjityKvt4xVu5DtOQXUm3RoB1ZUSji1wy7Dm6Kikno2HOKI7RfoixYnIfdIsQQ9FzG3qpvRlG1DL84eCT4Qmad36THQQBUUzhojch-fnBEQmARWMnmSxRc8HYpmMqCW6NNtvkA9H70uxItc/file#")}
.benefit-list .dve:before { background-image: url("https://www.finnwards.com/wp-content/uploads/2023/08/working-while-sick.jpg"); background-position-y: 20%}
.benefit-list .tri:before { background-image:...