<div class="custom-collection">
<h2 class="custom-collection-title">How to earn that wreath</h2>
<p class="custom-collection-description">Sufficient courage embodied</p>

<div class="custom-collection-items">
{% assign collectionHandle = 'Gold' %}
{% assign collection = collections[collectionHandle] %}

{% for product in collection.products %}
<div class="custom-collection-item">
<a href="{{ product.url }}">
<img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}" />
<p>{{ product.title }}</p>
</a>
</div>
{% endfor %}
</div>
</div>

<style>
.custom-collection {
/* Add custom styles for the collection container */
}

.custom-collection-title {
/* Add custom styles for the collection title */
}

.custom-collection-description {
/* Add custom styles for the collection description */
}

.custom-collection-items {
display: flex;
overflow-x: auto;
/* Add custom styles for the scroll-through display of items */
}

.custom-collection-item {
flex: 0 0 auto;
margin-right: 20px;
/* Add custom styles for each individual item in the collection */
}

.custom-collection-item a {
display: block;
text-decoration: none;
/* Add custom styles for the link to the product page */
}

.custom-collection-item img {
width: 200px;
height: auto;
/* Add custom styles for the product image */
}

.custom-collection-item p {
/* Add custom styles for the product title */
}
</style>