/* ================================================== 
   メインビジュアル画像切り替え設定
   /assets/css/movie-recommendations.css
================================================== */

.movie-recommendations-wrapper {
  position: relative;
  margin-top: 0;
}

.main-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1920 / 1500; /* 初期比率を設定（780～1199px用） */
}

/* 画像共通スタイル */
.main-visual-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
  object-position: center top;
  opacity: 0; /* 初期は非表示に設定 */
  transition: opacity 0.3s ease-in-out;
}

/* 1200px以上 */
@media screen and (min-width: 1200px) {
  .main-visual {
    aspect-ratio: 1920 / 1350; /* この比率を必ず使用する（重要） */
  }
  .pc-image-large {
    opacity: 1; /* 1200px以上の画像表示 */
  }
}

/* 780px～1199px（PC中サイズ） */
@media screen and (min-width: 780px) and (max-width: 1199px) {
  .main-visual {
    aspect-ratio: 1920 / 1500;
  }
  .pc-image {
    opacity: 1; /* 中間サイズ画像表示 */
  }
}

/* 779px以下（SP用画像） */
@media screen and (max-width: 779px) {
  .main-visual {
    aspect-ratio: 1920 / 2000;
  }
  .sp-image {
    opacity: 1; /* スマホ用画像表示 */
  }
}


/* ============================================
   通常表示用スタイル（映画おすすめページ専用）
============================================ */

/* --------------------------------
   ヘッダーの設定
-------------------------------- */
.site-header, header {
  position: relative;
  z-index: 1000 !important; /* ヘッダーのz-indexを大きくすることで必ず一番前に表示されるように */
}

/* --------------------------------
   親要素の制約を解除
-------------------------------- */
.page-id-2287 .post,
.page-id-2287 #content,
.page-id-2287 #contentInner,
.page-id-2287 #wrapper,
.page-id-2287 main {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* --------------------------------
   コンテンツ領域を透明にする
-------------------------------- */
.page-id-2287 #content,
.page-id-2287 #contentInner,
.page-id-2287 .post,
.page-id-2287 main,
.page-id-2287 .movie-recommendations-wrapper {
  background: transparent !important;
}


/* --------------------------------
   ページ背景の設定（横スクロール禁止＋縮小対応版）
-------------------------------- */
body.page-id-2287 {
  background-image: url('https://raydorim.com/wp-content/uploads/2025/05/raydorim_Elegant_seamless_wallpaper_pattern_evoking_a_refined_V_9b09278a-9756-4086-b530-7521e4b358c9.png');
  background-size: cover; /* 画面いっぱいに自然にフィット（画質維持） */
  background-attachment: fixed; /* 背景固定 */
  background-repeat: no-repeat; /* 繰り返し無し */
  background-position: center center; /* 常に中央に表示 */
  overflow-x: hidden; /* 横スクロール禁止 */
}

/* ===========================
   検索フィルターエリア
   =========================== */

   /* --------------------------------
   リセットボタン
  -------------------------------- */
.movie-recommendations-wrapper .movie-filter-reset{
  display: inline-flex;
  align-items: center;
  gap: .45em;
  /* サイズは端末幅にあわせて微調整 */
  padding: clamp(6px, 0.9vw, 10px) clamp(12px, 1.6vw, 16px);
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  /* 配色：フィルターバーに馴染む透明ボタン */
  color: #fff;
  background: rgba(0,0,0,.25);
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 999px;

  /* 雰囲気合わせの影とアニメーション */
  text-shadow: 1px 2px 3px rgba(0,0,0,.45);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .12s ease, border-color .25s ease;
  /* フレックスの左側に寄せつつ間隔をとる */
  margin-right: clamp(10px, 1.5vw, 18px);
}

/* 左の↺アイコン（CSSのみで追加） */
.movie-recommendations-wrapper .movie-filter-reset::before{
  content: "↺";
  font-size: 1.1em;
  transform: rotate(0deg);
  transition: transform .3s ease;
}

/* ホバー・アクティブ */
.movie-recommendations-wrapper .movie-filter-reset:hover{
  background: #fff;
  color: #e77c03;              /* フィルターバーの基調色に合わせる */
  border-color: #fff;
  text-shadow: none;
}
.movie-recommendations-wrapper .movie-filter-reset:hover::before{
  transform: rotate(-180deg);
}
.movie-recommendations-wrapper .movie-filter-reset:active{
  transform: translateY(1px);
}

/* キーボード操作のフォーカスリング */
.movie-recommendations-wrapper .movie-filter-reset:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.65),
    0 0 0 6px rgba(231,124,3,.55);
}

/* SP縦：フィルターバーを縦積みにした時は左上に収める */
@media (max-width: 768px){
  .movie-recommendations-wrapper .movie-filter-reset{
    align-self: flex-start;
    margin: 2px 0 6px 0; /* 上部に軽く余白 */
  }
}

/* 低モーション設定の端末では回転アニメを止める */
@media (prefers-reduced-motion: reduce){
  .movie-recommendations-wrapper .movie-filter-reset,
  .movie-recommendations-wrapper .movie-filter-reset::before{
    transition: none;
  }
}


/* --------------------------------
   その他の検索フィルターエリアのスタイル
-------------------------------- */

.movie-recommendations-wrapper .filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #e77c03a0;
  border-radius: 15px;
  margin: 40px auto 40px; /* 上のマージンを少なく、下を少し広く */
  padding: 20px 40px; /* パディングを増やしてボタンサイズも調整 */
  max-width: 1600px; /* 幅調整（左右スペース調整） */
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* ▼ セレクト：矢印位置を統一（文言から離れすぎ問題の解消） */
.movie-recommendations-wrapper .filter-dropdowns select {
  color: #FFFFFF;
  background: transparent;
  font-size: 20px;
  font-weight: 700;
  margin-right: 16px;
  padding: 10px;
  padding-right: 32px; /* 右端の矢印ぶんの余白 */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
  appearance: none; /* 各ブラウザでネイティブ矢印を消す */

  /* 下向き矢印（1行のエンコードSVG） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%23fff'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center; /* 右端から10pxで固定 */
  background-size: 10px 6px;
}

.movie-recommendations-wrapper .filter-dropdowns select:hover {
  background: rgba(16, 13, 13, 0.477);
}

.movie-recommendations-wrapper .filter-dropdowns option {
  background: #000000;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

/* ▼ タイトル検索（虫眼鏡つき） */
.movie-recommendations-wrapper .filter-dropdowns .title-search{
  color:#FFFFFF;
  background-color: rgba(0,0,0,0.25);
  font-size:20px;
  font-weight:700;
  margin-right:16px;

  /* 虫眼鏡と文字が重ならない固定余白（!important 不要） */
  padding:10px 14px 10px 40px;

  border:none;
  border-radius:8px;
  cursor:text;
  transition: background-color .3s, box-shadow .2s;
  text-shadow:1px 2px 3px rgba(0,0,0,0.6);
  outline:none;
  box-sizing:border-box;         /* ② はみ出し防止 */
  white-space:nowrap;            /* ② 例文は途中で切れてOK */
  text-overflow:ellipsis;
  overflow:hidden;
  appearance: none;

  /* ルーペ（1行エンコードSVG） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.471 6.471 0 001.48-4.23C15.91 6.01 13.4 3.5 10.45 3.5S5 6.01 5 9s2.51 5.5 5.45 5.5c1.61 0 3.09-.59 4.23-1.48l.27.28v.79l4.25 4.25 1.27-1.27L15.5 14zm-5.05 0C8.01 14 6 11.99 6 9.5S8.01 5 10.45 5s4.45 2.01 4.45 4.5S12.89 14 10.45 14z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:10px 50%;
  background-size:18px 18px;
}

.movie-recommendations-wrapper .filter-dropdowns .title-search::placeholder{
  color:#ffffffcc;
}

.movie-recommendations-wrapper .filter-dropdowns .title-search:focus{
  background-color: rgba(0,0,0,0.45);
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}

/* ラジオボタンスタイル調整 */
.movie-recommendations-wrapper .filter-radios {
  position: relative;
  background: #000000;
  padding: clamp(8px, 1.5vw, 12px) clamp(12px, 2vw, 20px);
  border-radius: 12px;
  display: flex;
  justify-content: center;
}

.movie-recommendations-wrapper .filter-radios input {
  display: none;
}

.movie-recommendations-wrapper .filter-radios label {
  position: relative;
  margin: 0 20px; /* ラベル間の間隔を広げる（20pxに調整） */
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 600;
  user-select: none;
  cursor: pointer;
  z-index: 10;
  color: #ffffff;
  padding: 4px 8px; /* ラベルのパディングを追加 */
}

.movie-recommendations-wrapper .filter-radios input:checked + label,
.movie-recommendations-wrapper .filter-radios label:hover {
  color: #ff9900;
}

.movie-recommendations-wrapper .checked-radio-bg {
  position: absolute;
  background: #ffffff;
  border-radius: 8px;
  transition: all 0.3s ease;
  top: 50%;
  transform: translateY(-50%);
  height: 70%;
  width: auto; /* 幅を自動化する */
  z-index: 1;
}

/* ラベルごとの正確な位置調整 */
.movie-recommendations-wrapper #featured:checked ~ .checked-radio-bg { left: 6%;  width: 28%; }
.movie-recommendations-wrapper #popular:checked  ~ .checked-radio-bg { left: 36%; width: 28%; }
.movie-recommendations-wrapper #newest:checked   ~ .checked-radio-bg { left: 66%; width: 28%; }

/* 1200px以下の場合のみ適用 */
@media screen and (max-width: 1200px) {
  .movie-recommendations-wrapper .filter-bar {
    margin: 30px 30px; /* 左右の余白20px */
  }
}

/* ▼ SP：縦積み時のはみ出し防止 */
@media screen and (max-width: 768px) {
  .movie-recommendations-wrapper .filter-bar {
    flex-direction: column;
    padding: 10px;
    gap: 15px;
  }

  .movie-recommendations-wrapper .filter-dropdowns select {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .movie-recommendations-wrapper .filter-dropdowns .title-search{
    width:100%;
    margin-right:0;
    margin-bottom:10px;
  }

  .movie-recommendations-wrapper .filter-radios {
    width: 100%;
    justify-content: center;
    display: flex;
  }

  .movie-recommendations-wrapper .checked-radio-bg {
    display: none;
  }
}




/* --------------------------------------------------
   映画カード一覧エリアのスタイル
-------------------------------------------------- */

.movies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* カード最小幅を広げてカードが大きくなるように調整 */
  gap: 20px;
  grid-gap: 20px;
  justify-content: center;
  align-items: start;
  max-width: 1900px; /* 最大幅を広げ8枚まで収容可能に */
  margin: 0 auto;
  padding: 0 60px; /* 左右の余白を調整 */
}

/* 映画カード全体のスタイル */
.movie-card {
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
  border-radius: 15px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease;
}
.movie-card:hover {
  transform: translateY(-5px);
}

/* 画像エリアはインスタ縦画像比率4:5に */
.movie-card .card-head {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 15px;
  margin-bottom: 15px;
  overflow: hidden;
}

/* 画像ズーム効果 */
.movie-card .card-head img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.movie-card:hover .card-head img {
  transform: scale(1.1);
}

/* オーバーレイ */
.movie-card .card-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  backdrop-filter: blur(5px);
  transition: opacity 0.3s;
}
.movie-card:hover .card-overlay {
  opacity: 1;
}

/* ドキュメント/評価アイコン */
.movie-card .document,
.movie-card .rating {
  position: absolute;
  top: 12px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: flex;
  align-items: center;
  transform: scale(0.8);
  transition: transform 0.3s;
}
.movie-card .document { left: 12px; }
.movie-card .rating   { right: 12px; }
.movie-card:hover .document,
.movie-card:hover .rating {
  transform: scale(1);
}

/* 再生ボタン */
.movie-card .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  font-size: 60px;
  transition: transform 0.3s;
}
.movie-card:hover .play {
  transform: translate(-50%, -50%) scale(1);
}

/* タイトル */
.movie-card .card-title {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.3;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
.movie-card:hover .card-title {
  color: #ff9900;
}

/* ジャンル・年 */
.movie-card .card-info {
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: #ccc;
}
/* アイコンを前置 */
.movie-card .card-info .genre::before { content: "🎬 "; }
.movie-card .card-info .year::before  { content: "📅 "; }
/* 半透明の背景 */
.movie-card .card-info span {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.15);
}

/* カードをクリック後にリンクが反応するようにするためのコード */
.movie-card .card-overlay {
  pointer-events: none;
}

/* ---- グリッドセル内に確実に収める（重なり防止） ---- */
.movie-recommendations-wrapper .movies-grid > .movie-card {
  display: block;
  box-sizing: border-box;  /* paddingを幅に含める */
  min-width: 0;            /* 1frの中で縮められるように */
}


/* ----------------------------------------------
   「LOAD MORE」ボタンスタイル
----------------------------------------------- */
.load-more {
  background: #000000;
  display: block;
  padding: clamp(12px, 2vw, 20px) clamp(30px, 4vw, 60px);
  margin: 20px auto;
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 700;
  border-radius: 15px;
  color: #ffffff;
  transition: background 0.3s;
}

.load-more:hover {
  background: #ff9900;
}

.load-more-wrapper {
  text-align: center;
  margin: 20px 0;
  display: flex;
  flex-direction: column;   /* 縦並びに */
  align-items: center;
  gap: 10px;
}

.load-more-status {
  display: block;
  font-size: 1rem;          /* 大きめの文字 */
  font-weight: 700;
  color: #ffffff;           /* 白文字 */
  background: #ff3b3b;      /* 目立つ赤背景 */
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------
   　CATEGORY SECTION
----------------------------------------------- */

/* CATEGORY SECTION */

.category-section .section-heading {
    position: relative;
    font-size: 50px; /* 任意で調整可能 */
    color: #FFFFFF; /* 文字色を白に設定 */
    font-family: 'Noto Sans JP', sans-serif; /* すでに連携済の日本語ゴシックフォントを使用 */
    font-weight: 700; /* 太字（bold） */
    padding-left: 80px; /* 左側に空白を作成 */
    margin-bottom: 40px; /* 下部に余裕を持たせる */
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
    z-index: 0;
}



.category {
    margin-bottom: 60px;
}

.category-grid {
    display: grid;
    max-width: 1800px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 30px;
    padding: 0 30px; /* 左右に30pxの余白を設定 */
}

.category-card {
    position: relative;
    height: 150px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
}

.category-card .name {
  position: absolute;
  bottom: 15px;
  left: 15px;
  /*font-size: 28px;*/
  font-size: clamp(14px, 4vw, 20px); /* テキストサイズをレスポンシブに調整 */
  line-height: 1.1;
  white-space: nowrap; /* 常に一列表示 */
  overflow: hidden;
  max-width: 90%; /* 名前がカード幅を超えないよう制限 */
  color: #ffffff;
  font-family: 'BespokeStencil-Bold', 'Inter', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease;
  z-index: 20;
}

.category-card:hover .name {
    color: #ff9900;
}

.category-card .total {
    position: absolute;
  top: 10px;
  right: 10px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 8px;
  z-index: 20;
}

/* === カテゴリーカード全体 === */
.category-card a {
  display: block;
  position: relative;
  height: 100%;
}

/* === 画像 === */
.category-card .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === レスポンシブ調整 === */
@media (max-width: 600px) {
  .category-card {
    height: 120px;
  }

  .category-card .name {
    font-size: 22px;
  }

  .category-card .total {
    font-size: 12px;
  }
}
/* ヘッダーとカテゴリーセクションの重なりを解消 */


/* テキストとカウント数字をヘッダーより上に重ならないようにする */
.site-header, header {
  position: relative;
  z-index: 1000 !important; /* ヘッダーのz-indexを大きくすることで必ず一番前に表示されるように */
}

.category-section {
  position: relative;
  z-index: 1 !important; /* カテゴリーのz-indexを低く設定し、ヘッダーより背面に */
}

/* 〜599px：最小140pxで2列確保（端末により3列化もOK） */
@media (max-width: 599px) {
  .movie-recommendations-wrapper .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;             /* 端末幅に優しいギャップ */
    grid-gap: 12px;        /* フォールバック */
    padding: 0 12px;       /* 60pxだと詰むので縮小 */
  }
  /* auto-fill / minmax が未対応な古環境フォールバック（Huawei対策） */
  @supports not (grid-template-columns: repeat(auto-fill, minmax(140px, 1fr))) {
    .movie-recommendations-wrapper .movies-grid {
      grid-template-columns: repeat(2, 1fr); /* まずは確実に2列に */
    }
  }
}

/* 600〜779px：最小200pxで最大3列に抑える */
@media (min-width: 600px) and (max-width: 779px) {
  .movie-recommendations-wrapper .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    grid-gap: 16px;
    padding: 0 16px;
  }
  @supports not (grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))) {
    .movie-recommendations-wrapper .movies-grid {
      grid-template-columns: repeat(2, 1fr); /* 古環境は安全に2列維持 */
    }
  }
}

/* カードをグリッドのセル幅にきっちり収めるための共通 Fix */
.movie-recommendations-wrapper .movies-grid > .movie-card {
  display: block;           /* a要素をブロック化（安全側） */
  box-sizing: border-box;   /* パディングを幅に含めてはみ出し防止 */
  min-width: 0;             /* 1fr 収まらないときに縮められるように */
}

/* ----------------------------------------------
   カテゴリーヒーロー（カード画像を単体categoryカードページtopに表示）
----------------------------------------------- */
.category-hero{
  position: relative;
  max-width: 1600px;
  margin: 20px auto 10px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 5;
}

/* 画像：暗くしない／拡大しない／レイヤー順を最背面に */
.category-hero__img{
  position: absolute;
  inset: 0;
  background-image: var(--hero);
  background-size: cover;
  background-position: center;
  transform: none;            /* ← scale(1.02) を無効化 */
  filter: none;               /* ← brightness(0.85) を無効化 */
  z-index: 0;                 /* レイヤー順を明示 */
}

/* オーバーレイ：外す（薄く残したい場合は下のコメント参照） */
.category-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: none;           /* ← 以前の黒グラデを撤去 */
  pointer-events: none;
  z-index: 1;
}

/* タイトル：ハッキリした白＆前面に */
.category-hero__title{
  position: absolute;
  left: clamp(16px, 2.8vw, 40px);
  bottom: clamp(16px, 3vw, 48px);
  color: #fff;
  font-weight: 800;
  font-size: clamp(26px, 4vw, 48px);
  letter-spacing: .03em;
  text-shadow: 0 2px 8px rgba(0,0,0,.25); /* くすまない程度の輪郭 */
  z-index: 2;                 /* タイトルを最前面に */
}

@media (max-width: 768px){
  .category-hero{ aspect-ratio: 16 / 7; }
}

/* ── もし“ほんの少しだけ暗くしたい”場合は、上の background:none を次に置換：
.category-hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.15));
  pointer-events:none; z-index:1;
}
*/

/* ============================================
   PC 狭幅（ウィンドウ <= 780px だがマウス操作）用の微調整
   ※ スマホ端末には影響させず、PCだけ拡大感を抑える
============================================ */
@media screen and (max-width: 780px) and (hover: hover) and (pointer: fine) {
  /* メインビジュアルを縦に伸ばしすぎない */
  .main-visual {
    aspect-ratio: 1920 / 1500; /* スマホ用(1920/2000)を上書きして高さを約78%に */
  }

  /* フィルタバーを少しコンパクトに */
  .movie-recommendations-wrapper .filter-bar {
    padding: 12px 16px;
    gap: 10px;
  }
  .movie-recommendations-wrapper .filter-dropdowns select,
    .movie-recommendations-wrapper .filter-dropdowns .title-search {
    font-size: 16px;
    padding: 8px 12px 8px 40px;
  }


  /* ラジオの見た目を縮小＋折返し防止 */
  .movie-recommendations-wrapper .filter-radios {
    padding: 6px 10px;
  }
  .movie-recommendations-wrapper .filter-radios label {
    margin: 0 10px;
    font-size: 14px;
    white-space: nowrap; /* 「注目」が縦に割れないよう固定 */
  }

  /* グリッドも少しだけ密に（単一ヒットでも拡大しないよう auto-fill） */
  .movie-recommendations-wrapper .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    grid-gap: 12px;
    padding: 0 12px;
  }
}