/** Shopify CDN: Minification failed

Line 92:0 Unexpected "<"
Line 99:0 Unexpected "<"
Line 102:3 Expected identifier but found "%"
Line 103:4 Unexpected "<"
Line 104:7 Expected identifier but found "%"
Line 105:8 Unexpected "<"
Line 106:7 Expected identifier but found "%"
Line 107:6 Unexpected "<"
Line 107:34 Unexpected "{"
Line 107:43 Expected ":"
... and 3 more hidden warnings

**/
/* ===== MOSSA — HOME ONLY: header over hero video (Zara-style) ===== */

/* 0) Kill any default top spacing on the first section */
.template-index .content-for-layout,
.template-index main .shopify-section:first-of-type {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 1) Dawn makes the header sticky; disable that on home so we can absolutely position */
.template-index .shopify-section-header-sticky {
  position: static !important;
}

/* 2) Put the header wrapper on top of the first section and make it transparent */
.template-index .shopify-section-header,
.template-index #shopify-section-header {
  position: relative !important;              /* keeps the section in flow */
  z-index: 50;
}

.template-index .header-wrapper {
  position: absolute !important;              /* floats over the hero */
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 50;
  background: transparent !important;         /* remove white/gradient */
  box-shadow: none !important;
  border: 0 !important;
}

/* Some themes paint bg via ::before — remove it */
.template-index .header-wrapper::before,
.template-index .shopify-section-header::before,
.template-index .section-header::before,
.template-index .header::before {
  content: none !important;
}

/* 3) Inner header must also be transparent */
.template-index .header,
.template-index .header .header__container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* 4) Make logo/menu/icons white while sitting over the video */
.template-index .header a,
.template-index .header__menu-item,
.template-index .list-menu__item a,
.template-index .header__icon,
.template-index .header__icons svg,
.template-index .header__icon svg {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* 5) Hide announcement/utility bar on home so no white strip shows */
.template-index .utility-bar,
.template-index .announcement-bar,
.template-index .shopify-section-announcement-bar {
  display: none !important;
}

/* 6) Ensure the first section can sit under the header (z-index below it) */
.template-index main .shopify-section:first-of-type {
  position: relative;
  z-index: 0;
}

/* 7) OPTIONAL — if your hero section uses a .mossa-hero wrapper, this makes it full screen */
.mossa-hero { position: relative; height: 100vh; overflow: hidden; margin:0 !important; padding:0 !important; z-index: 0; }
.mossa-hero video { width:100%; height:100%; object-fit:cover; display:block; background:#000; }
<style>
.mossa-catalog-two-up{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:0}
.mossa-tile{position:relative;display:block}
.mossa-tile img{width:100%;height:100vh;object-fit:cover;display:block}
.mossa-caption{position:absolute;left:2rem;bottom:2rem;font-size:clamp(18px,2vw,24px);color:#fff;pointer-events:none}
.template-collection .page-width,.template-collection .content-for-layout{padding:0!important}
@media(max-width:989px){.mossa-catalog-two-up{grid-template-columns:1fr}.mossa-tile img{height:60vh}}
</style>

<div class="mossa-catalog-two-up">
  {% for product in collection.products %}
    <a class="mossa-tile" href="{{ product.url }}" title="{{ product.title }}">
      {% if product.featured_image %}
        <img src="{{ product.featured_image | img_url: 'master' }}" alt="{{ product.title | escape }}" loading="eager">
      {% endif %}
      <div class="mossa-caption">{{ product.title }}</div>
    </a>
  {% endfor %}
</div>