Thank you for the comments!
For the main projects section, I used Grid
layout, and for the collections, I used List
layout in the page’s theme editor.
As for the two-column layout of the collections, that was done through this custom CSS:
@media (min-width: 780px) {
/* Split collections row into two-column layout on desktop */
.collections {
display: grid;
grid-template-columns: 50% 50%;
padding: 2em 0 !important;
}
.collections .inner_column {
height: 100%;
display: flex;
flex-direction: column;
}
/* Fade out gradient */
.collection_row {
position: relative;
overflow: hidden;
margin: 0 0.8em;
}
.collection_row::before {
content: "";
position: absolute;
bottom: 0;
box-shadow: inset -13em 0 9em -2em #0f1116; /* Match the background color */
pointer-events: none;
width: 100%;
height: 76%;
z-index: 2;
}
.collection_row:first-child {
padding-left: 1.2em;
}
.collection_row:last-child {
padding-right: 1.2em;
}
}