<div class="horizontal-card">
<img src="https://via.placeholder.com/250x323" alt="placeholder image" class="thumbnail">
<div class="content">
<h2>Heading Text</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore</p>
</div>
<span class="btn-group">
<button class="btn">Download</button>
</span>
</div>
<div class="horizontal-card">
<img src="https://via.placeholder.com/250x323" alt="placeholder image" class="thumbnail">
<div class="content">
<h2>Heading Text</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore</p>
</div>
<span class="btn-group">
<button class="btn">Download - English</button>
<button class="btn btn-outline">Download - Mandarin</button>
<button class="btn btn-outline">Download - Spanish</button>
</span>
</div>
.vertical-card {
width: 400px;
height: fit-content;
display: inline-block;
border: 1px solid var(--text-color);
border-radius: 6px;
overflow: hidden;
}
.vertical-card .thumbnail {
border-radius: 6px 6px 0 0;
max-width: 400px;
max-height: 518px;
}
.vertical-card .content {
margin-top: -15px;
padding: 0px 17px;
}
.vertical-card h2 {
color: var(--purple-800-brand);
font-size: 35px;
margin: .5em 0;
}
.vertical-card p {
margin-top: 0;
margin-bottom: .973em;
}
.vertical-card .btn {
display: inline-block;
width: 100%;
text-align: center;
margin: 0 0 .973em 0;
}
.vertical-card .btn-group .btn {
width: 174px;
}
.vertical-card .btn-group .btn:first-child {
margin-right: 11px;
}
.horizontal-card {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 1fr;
grid-template-areas: "thumbnail content"
"thumbnail btns";
column-gap: 1em;
row-gap: 0px;
border: 1px solid var(--text-color);
border-radius: 6px;
max-width: calc(250px + 353px + 1em);
}
.horizontal-card .thumbnail {
grid-area: thumbnail;
border-radius: 6px 0 0 6px;
max-width: 250px;
max-height: 323px;
}
.horizontal-card h2 {
color: var(--purple-800-brand);
font-size: 35px;
margin: .5em 0;
}
.horizontal-card .content {
grid-area: content;
padding-right: 17px;
}
.horizontal-card .btn-group {
grid-area: btns;
padding-right: 17px;
display: flex;
flex-direction: column;
gap: 1em;
align-items: flex-end;
}
.horizontal-card .btn {
display: inline-block;
margin: 0;
width: 100%;
text-align: center;
height: fit-content;
}
.horizontal-card .btn-group .btn:last-child {
margin-bottom: .6em;
}
.download-link a {
display: block;
color: var(--purple-800-brand);
text-decoration: none;
margin-bottom: .75em;
}
.download-link a i {
margin-right: .25em;
}
.download-link a:hover {
text-decoration: underline;
}