.article .thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 590 / 368;
}

.article .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.article .category {
  border-radius: 32px;
  border: 1px solid #A69C53;
  background: #FFF;
  padding: 3px 16px 4px 16px;
  font-weight: 500;
  font-size: var(--fz14);
}

.article time {
  color: #4E4E4E;
}

.columns-slider {
  visibility: visible;
}


.columns-slider {
  margin-left: -18px;
  margin-right: -18px;
}

.columns-slider:not(:has(.splide__slide:nth-of-type(3))) .splide__list {
  gap: 20px;
}

.columns-slider .splide__slide .thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 590 / 368;
}

.columns-slider .splide__slide .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.columns-slider-arrows {
  position: absolute;
  width: 60%;
  height: auto;
  aspect-ratio: 590 / 368;
  left: 20%;
}

.columns-slider-arrow {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  opacity: 1;
}

.columns-slider-prev {
  left: 0;
  translate: calc(-24px - 100%) 0;
}

.columns-slider-next {
  right: 0;
  translate: calc(24px + 100%) 0;
}

.columns-slider-arrow svg {
  width: 12px;
  height: 12px;
  fill: #8C7826;
}

.columns-slider-pagination {
  position: static;
  margin: 20px 0;
}

.columns-slider-page {
  background: rgba(89, 89, 89, 0.40);
  margin: 0 5px;
}

.columns-slider-page.is-active {
  background: #73715D;
  transform: none;
}

@media (min-width:768px) {
  .first-article {
    display: flex;
    gap: 20px;
  }

  .first-article .thumb-container {
    width: 49.1%;
  }

  .first-article .article-texts {
    flex: 1;
  }

  .first-article .article-title {
    font-size: var(--fz32);
    line-height: 1.6;
  }

  .article time {
    font-size: var(--fz18);
  }

  .columns-slider {
    margin-left: 0;
    margin-right: 0;
  }

  .columns-slider-arrows {
    width: 100%;
    height: 58%;
    left: 0;
  }

  .columns-slider-arrow {
    width: 50px;
    height: 50px;
  }

  .columns-slider-prev {
    left: 0;
    translate: -16px 0;
  }

  .columns-slider-next {
    right: 0;
    translate: 16px 0;
  }

  .columns-slider-arrow svg {
    width: 20px;
    height: 20px;
    fill: #8C7826;
  }
}

@media (min-width:1280px) {
  .columns-slider-prev {
    translate: -25px 0;
  }

  .columns-slider-next {
    translate: 25px 0;
  }
}

/***************************************
Latest Articles
***************************************/
.tab button {
  width: 100px;
}

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.posts .thumb-container {
  width: 100%;
  height: auto;
  aspect-ratio: 339 / 212;
}

.posts .thumb-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.posts .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.posts .tags li a,
.posts .tags li span {
  padding: 3px 11px;
  border-radius: 30px;
  background: #EFEFEF;
}

.posts .post-title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (min-width:768px) {
  button.tab {
    min-width: 213px;
    font-size: var(--fz18);
  }

  .posts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px 40px;
  }

}