<div class="grid">
<div class="subgrid">
<h2>Awesome speaker</h2>
<img src="http://placekitten.com/200/200" alt="Adorable kitten as placeholder image">
<p>Chocolate bar gummies powder bear claw cake dragée oat cake cake. Chupa chups marzipan ice cream croissant topping liquorice toffee chupa chups chocolate. Pie pie gummies sweet chocolate.</p>
<span>🌐 https://websi.te</span>
<span>🐦 @twitter_handle</span>
<span>💻 github_username</span>
</div>
<div class="subgrid">
<h2>Incredible speaker</h2>
<img src="http://placekitten.com/200/200" alt="Adorable kitten as placeholder image">
<p>Chocolate bar gummies powder bear claw cake dragée Lemon drops I love tootsie roll dragée gingerbread tart danish halvah cake. Caramels dragée jelly beans tiramisu gummi bears I love danish. Cupcake dessert chocolate cake sesame snaps marzipan chocolate bar muffin sweet. Pudding biscuit topping I love cotton candy soufflé. Dragée pastry gummi bears. Cookie jelly beans liquorice. Sugar plum I love sugar plum pie I love. Chupa chups sesame snaps dessert chupa chups.</p>
<span>🌐 https://longer.website.url</span>
<span>🐦 @twt</span>
<span>💻 github_name</span>
</div>
<div class="subgrid">
<h2>Amazing speaker</h2>
<img src="http://placekitten.com/200/200" alt="Adorable kitten as placeholder image">
<p>Pie dragée marzipan lemon drops sugar plum wafer I love. Topping tiramisu sweet roll apple pie gummi bears. Toffee ice cream powder. Muffin sesame snaps I love marshmallow. Lemon drops cotton candy macaroon marzipan carrot cake bonbon candy canes powder. Sesame snaps lemon drops fruitcake jujubes topping jujubes cupcake jujubes. Cookie cupcake I love.</p>
<span>🌐 https://shrt.url</span>
<span>🐦 @but_super_long_twitter</span>
<span>💻 github_lover</span>
</div>
</div>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.grid {
display: grid;
grid-template-columns: minmax(7em, 12em) max-content max-content max-content 1fr;
row-gap: 2em;
padding: 1em;
}
.subgrid {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: min-content max-content min-content;
column-gap: 1em;
border: 2px solid #000;
box-shadow: 4px 4px 0 0 #222;
padding: 1.5em;
}
h2 {
grid-column: 1 / -1;
margin-bottom: 1em;
}
p {
grid-column: 2 / -1;
line-height: 1.4;
margin-bottom: 1em;
}
img {
grid-row: 2 / -1;
align-self: center;
border-radius: 50%;
max-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}