Gallery Page Guide

The gallery pages are created using the Explore by Surface sections. In these sections, there is a setting called "Class name". This setting was created as a workaround to only add styles to the first Explore by Surface section.

The first of the sections on the page needs extra styles that allow it to have a negative margin on larger screens in order for the section to overlay the grey background. In the Class name setting on the first section, I added "first-of-type". In the code, there are styles correlating to that class name:

.explore-surface.first-of-type {
    .surfaces.blog-surfaces {
        @media screen and (min-width: 1400px) {
            margin-top: -50px;
        }
        @media screen and (min-width: 1600px) {
            margin-top: -70px;
        }
    }
}

<div class="explore-surface {{ section.settings.class_name }}">