/* products-page = 作品の一覧ページ(/products)固有の部分

   ページの外枠(余白・見出し・戻るリンク)は sub-page.css にまとめてある。
   カードの見た目そのものは products.css(base.html から全ページ共通で読み込み)。
   ここに残るのは「トップと同じ id を使ったせいで要る打ち消し」と、一覧の出る順番だけ。

   ★読み込む順番は sub-page.css → products-page.css(products.html の head_extra)。 */

/* ★#products の余白(products.css の 80px 10%)を打ち消す。
     トップと同じ id を使ってカードのCSSを借りているので、
     打ち消さないと見出しがヘッダーの下に潜る。
     ★値は sub-page.css の .sub-page と同じにすること。 */
#products.sub-page {
    padding: 140px 10% 100px;
}

/* ★1枚ずつずらして出すのはトップページだけ(reveal.css)。ここはまとめて出す。 */
.sub-page .products-grid {
    margin-top: 0;

    --fade-delay: 0.3s;
}

/* ---------- スマホ用 ---------- */
@media (max-width: 768px) {
    #products.sub-page {
        padding: 110px 6% 80px;
    }
}