/* worksArchive */

.worksArchive__container {
  display: flex;
  padding-top: 80px;
  gap: 4vw;
  width: 90%;
  margin: auto;
}

.worksArchive__postContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
}

.worksArchive__post {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.worksArchive__thumbnail {
  flex: 1;
}

.worksArchive__thumbnailImg {
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 8px;
}

.worksArchive__thumbnailImg img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.worksArchive__textArea {
  margin-top: 8px;
}

.worksArchive__thumbnailNoImg img {
  object-fit: contain;
}

.worksArchive__info {
  display: flex;
  gap: 8px;
  font-weight: bold;
  color: var(--btn);
}

.worksArchive__title {
  font-size: 20px;
  font-weight: bold;
  color: var(--text);
}

/* animation */

.worksArchive__thumbnail img:hover {
  transform: scale(1.1);
  transition: transform 0.6s;
}

.worksArchive__title a:hover {
  color: var(--btn);
  transition: color 0.2s;
}

/* worksSingle */
.worksSingle__content {
  margin-top: 80px;
}

.worksSingle__info {
  display: flex;

  margin-top: 8px;
  font-weight: bold;
  color: var(--btn);
}

.worksSingle__title {
  font-size: 28px;
  font-weight: bold;
}

.worksSingle__thumbnail {
  margin-top: 40px;
}

.worksSingle__thumbnailImg img {
  border-radius: 8px;
}

@media screen and (max-width: 960px) {
  .worksArchive__postContainer {
    grid-template-columns: none;
  }
  .worksArchive__container {
    padding-bottom: 80px;
  }
}