.component-navigation {
  grid-column: 1 / -1;
  align-items: center;
  gap: 24px;
  margin-top: 60px;
  display: flex;
}

.component-navigation > .prev circle {
  fill: #0000;
  transition: fill .3s;
}

.component-navigation > .prev path {
  transition: stroke .3s;
}

.component-navigation > .prev:hover circle {
  fill: var(--color-primary-4);
}

.component-navigation > .prev:hover path {
  stroke: #fff;
}

.component-navigation > .prev.disabled {
  pointer-events: none;
  opacity: .2;
}

.component-navigation > .next circle {
  fill: #0000;
  transition: fill .3s;
}

.component-navigation > .next path {
  transition: stroke .3s;
}

.component-navigation > .next:hover circle {
  fill: var(--color-primary-4);
}

.component-navigation > .next:hover path {
  stroke: #fff;
}

.component-navigation > .next.disabled {
  pointer-events: none;
  opacity: .2;
}

.component-navigation > .pagination {
  width: auto;
}

.component-navigation > .pagination > p {
  letter-spacing: 3px;
  color: var(--color-primary-2);
  font-family: Poppins, sans-serif;
  font-size: 32px;
  font-weight: 200;
  line-height: 1.2;
}

.component-navigation > .left-line {
  background-color: var(--color-primary-4);
  flex-grow: 1;
  height: 1px;
}

.component-navigation > .right-line {
  background-color: var(--color-primary-4);
  flex-grow: 1;
  height: 1px;
}

.component-navigation.hidden {
  display: none;
}

.component-navigation.right-line-only > .left-line {
  display: none;
}

.component-navigation.no-line {
  justify-content: center;
  gap: 40px;
}

.component-navigation.no-line > .left-line {
  display: none;
}

.component-navigation.no-line > .right-line {
  display: none;
}

@media screen and (max-width: 575px) {
  .component-navigation {
    gap: 16px;
    margin-top: 24px;
  }
}.component-article-card {
  grid-row: span 4;
  grid-template-rows: subgrid;
  margin-bottom: 60px;
  display: grid;
}

.component-article-card .img {
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  margin-bottom: 24px;
  overflow: hidden;
}

.component-article-card .img > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .3s;
}

.component-article-card .img.aquare {
  aspect-ratio: 1;
}

.component-article-card .name {
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  display: flex;
}

.component-article-card .title {
  margin-bottom: 8px;
  transition: color .3s;
}

.component-article-card .content {
  color: var(--color-gray-3);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.component-article-card:hover .img > img {
  transform: scale(1.1);
}

.component-article-card:hover .title {
  color: var(--color-primary-2);
}

.component-article-card.swiper-slide {
  margin-bottom: 0;
}

@media screen and (max-width: 575px) {
  .component-article-card {
    margin-bottom: 40px;
  }

  .component-article-card .img {
    margin-bottom: 12px;
  }

  .component-article-card .name {
    margin-bottom: 8px;
  }
}.home-topic{background-color:var(--color-secondary-1);grid-template-rows:min-content 1fr;grid-template-columns:min-content minmax(0,1fr);align-items:start;gap:60px;padding-top:80px;padding-bottom:80px;padding-left:max(50% - 600px, 24px);display:grid}.home-topic-content>h2{color:var(--color-primary-2);margin-bottom:24px}.home-topic-content>h3{margin-bottom:40px}.home-topic-content>p{white-space:pre-line}.home-topic-swiper{grid-area:1 / 2 / 3 / 3}.home-topic-swiper .swiper-wrapper{grid-auto-flow:column;display:grid}@media screen and (max-width:1247px){.home-topic{gap:24px}}@media screen and (max-width:1023px){.home-topic{grid-template-columns:100%;gap:40px}.home-topic>a{order:1;margin-left:auto}.home-topic-swiper{grid-area:auto}}@media screen and (max-width:575px){.home-topic{padding-top:60px;padding-bottom:60px}}