/* ===================================================================
 * co-housing.css — 高齢者対応共同住宅(block/page/co-housing.php)
 *
 * 施設案内: 大1枚(2行ぶんの高さ)+ 小4枚のモザイク(2fr 1fr 1fr)。lg 未満は大1枚を全幅 3:2 + 小4枚を2列。
 *           大きい写真は拡大表示のリンク(.photo-zoom)ごと縦に伸ばして2行ぶんの高さにする。
 * =================================================================== */

/* --- 高齢者対応共同住宅とは？ ------------------------------------- */

/* --- 施設案内 ----------------------------------------------------- */

.co-housing-mosaic {
  grid-template-columns: 2fr 1fr 1fr;
}

.co-housing-mosaic__item {
  min-width: 0;
}

.co-housing-mosaic__item--large {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* 写真の縦横比ではなく、小さい写真2行ぶんの高さに合わせて縮ませる */
.co-housing-mosaic__item--large .photo-zoom,
.co-housing-mosaic__item--large img {
  min-height: 0;
}

@media (max-width: 991.98px) {
  .co-housing-mosaic {
    grid-template-columns: 1fr 1fr;
  }

  .co-housing-mosaic__item--large {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .co-housing-mosaic__item--large img {
    aspect-ratio: 3 / 2;
  }
}