/* 이미지 스타일 */
img {
  height: auto; /* 가로 세로 비율 유지 */
  display: block; /* 기본 인라인 동작 제거 */
}

.logo-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  width: 235px;
}
.logo img {
  width: 100%;
}

.index-link {
  position: relative;
  display: inline-block;
  background-color: lightgray;
}

.index-link a {
  position: relative; /* 링크 텍스트 위치 설정 */
  display: block;
  overflow: hidden; /* 링크 텍스트가 이미지를 가릴 경우를 대비하여 오버플로우 숨김 설정 */
}

.index-link span {
  position: absolute; /* 텍스트를 이미지 위로 위치시킴 */
  top: 0;
  right: 0;
  text-align: right;
  color: #f6f6f6; /* 링크 텍스트의 색상 설정 */
  background-color: rgb(81, 65, 255);
  padding: 2px 4px 0;
  text-decoration: none;
  z-index: 1; /* 링크 텍스트를 이미지 위에 올리기 */
}
.index-link span_email {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: left;
  text-decoration: none;
  z-index: 1;
}

.index-link img {
  transition: filter 0.3s ease;
}

.index-link img {
  display: block;
  width: 100%;
  height: auto;
  z-index: 0; /* 이미지를 아래로 보내기 */
}
.index-link img:hover {
  filter: brightness(80%);
}

/* 데스크탑에서 3열로 배열 */
@media only screen and (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3개의 동일한 너비의 열로 설정 */
    gap: 4px; /* 이미지 간 간격 설정 */
  }

  .index-link {
    width: 100%; /* 이미지가 그리드 셀에 가득 차도록 설정 */
    height: auto; /* 가로 세로 비율 유지 */
  }
  p.email {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
  }
}

/* 모바일에서는 1열로 배열 */
@media only screen and (max-width: 767px) {
  .index-link {
    width: 100%; /* 각 이미지를 컨테이너의 100%로 설정하여 1열 배치 */
    margin-bottom: 4px; /* 이미지 간 간격 설정 */
  }
  div.email {
    background-color: white;
  }

  p.email {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
  }
}