<div class="get-started-index-card-image">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/get-started-v2/become-coach-mob.png">
<source media="(min-width: 820px)" srcset="/assets/example-content/get-started-v2/become-coach-desk.png">
<img class="bg-image" src="/assets/example-content/get-started-v2/become-coach-desk.png" alt="" loading="lazy">
</picture>
</div>
No notes defined.
{
"smallimage": "/assets/example-content/get-started-v2/become-coach-mob.png",
"bigimage": "/assets/example-content/get-started-v2/become-coach-desk.png"
}
.get-started-index-card-image {
height: 100%;
width: 100%;
.bg-image {
object-fit: cover;
height: 100%;
width: 100%;
}
}
<div class="get-started-index-card-image">
<picture>
<source media="(max-width: 819px)" srcset="{{smallimage}}">
<source media="(min-width: 820px)" srcset="{{bigimage}}">
<img class="bg-image" src="{{bigimage}}" alt="" loading="lazy">
</picture>
</div>