<meta name="viewport" content="width=device-width, initial-scale=1">

/* Grid Layout */
.grid-container {
  display: flex;
  place-items: center; /* 또는 align-items: center; */
  flex-wrap: wrap;
  justify-content: space-between;
}

.grid-item {
  flex: 1 0 30%; /* 30%로 너비 조정 */
  box-sizing: border-box;
  margin: 1%;
  background-color: white;
  padding: 1px;
  border-radius: 4px;
  border: 0px solid #eaeaea; /* 추가된 border 스타일 */
}

.grid-item .post__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20%;
}

.tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  padding: 163px;
  padding-top: 10px; /* 추가: 모든 아이템의 높이를 동일하게 맞춤 */
}

.post__title {
  font-size: 22px; /* 16px로 변경 */
  white-space: initial;
  color: black;
  text-decoration: none ; /* 밑줄 제거 + !important */
  text-align: center;
}

.masthead_title {
  font-size: 2em;
}

/* 미디어 쿼리 */
@media (max-width: 600px) {
  .tiles {
    padding: 10px; /* 모바일 기기에 맞게 패딩 조정 */
  }

  .post__title {
    font-size: 16px; /* 모바일 기기에 맞게 폰트 사이즈 조정 */
    white-space: pre-line; 
    color: black;
    text-decoration: none ;
  }
}