/* 讓 container 滿版無左右內距 */
.full_content_padding,
.row_padding,
.main_left_margin {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 卡片容器：橫向排列並自動換行 */

#resourceContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1.5rem; 
  padding: 1rem;
}


/* 每張卡片寬度設定（桌機每排三張） */

.re-item {
  flex: 1 1 calc(33.333% - 1.5rem);
  max-width: calc(33.333% - 1.5rem);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}

/*
.re-item {
  flex: 0 0 calc(33.333% - 20px); 
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
}

#resourceContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; 
  gap: 20px; /* 卡片間距 */
}
*/

*/
/* 滑鼠懸停特效 */

.re-item:hover {
  transform: translateY(-3px);
}

/* 圖片自適應 */
/*
.re-item img {
  width: 100%;
  height: auto;
  display: block;
}
*/
/* 卡片內部間距 */
.re-pd {
  padding: 0.75rem 1rem;
}

/* 案例標題樣式 */
.re-title h3 {
  font-size: 1.4rem;
  color: #333;
  font-weight: bold;
  margin: 0.5rem 0;
}

/* 案例說明段落樣式 */
.re-description p {
  font-size: 0.95rem;
  color: #444;
}

/* Case Study/下載區塊樣式 */
.re-type {
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: bold;
  color: #007bff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 響應式：平板兩欄、手機一欄 */
/* 預設為4欄 */
/*
.re-item {
  flex: 1 1 calc(25% - 1.5rem); 
  max-width: calc(25% - 1.5rem);
}
*/

@media (max-width: 575px) {
  .re-item {
    flex: 0 0 100%; /* 手機每排 1 個 */
  }
}


/* 中型螢幕以下切為3欄 */
@media (max-width: 1199px) {
  .re-item {
    flex: 1 1 calc(33.333% - 1.5rem);
    max-width: calc(33.333% - 1.5rem);
  }
}

/* 小螢幕以下切為2欄 */
@media (max-width: 991px) {
  .re-item {
    flex: 1 1 calc(50% - 1.5rem);
    max-width: calc(50% - 1.5rem);
  }
}

/* 手機畫面 1欄 */
@media (max-width: 576px) {
  .re-item {
    flex: 1 1 100%;
    max-width: 100%;
  }
}


.re-img {
  width: 100%;
  height: 180px;         /* ✅ 統一圖片高度，可調整 */
  overflow: hidden;      /* ✅ 裁切溢出圖片 */
  border-radius: 8px 8px 0 0;
  position: relative;
  background-color: #eee; /* 可選：避免圖沒載入時留白 */
}

.re-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ✅ 圖片比例裁切填滿容器 */
  object-position: center;
  display: block;
}
.re-img picture,
.re-img picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}