@import url("/assets/css/components/molecules/breadcrumb.css");
@import url("/assets/css/components/molecules/blog-card.css");
@import url("/assets/css/components/molecules/members-box.css");
.blog-badge {
  background-color: #ffffff14;
  color: #ffffff66;
  font-weight: var(--font-normal);
  font-size: var(--text-sm);
  padding: 12px 16px;
  display: inline-flex;
  margin-top: 32px;
  border-radius: 50px;
}
.blog-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}
.blog-social span {
  color: #ffffff66;
  font-weight: var(--font-normal);
  font-size: var(--text-sm);
}
.blog-social .social-icons {
  display: flex;
  gap: 20px;
  padding: 12px 16px;
  background-color: #ffffff14;
  border-radius: 50px;
}
.blog-social .social-icons a {
  transition: var(--transition-transform);
}
.blog-social .social-icons a:hover {
  transform: scale(1.05);
}
.blog-detail .container {
  max-width: 892px;
}
.blog-detail .container .image {
  width: 100%;
  height: 336px;
  overflow: hidden;
  border-radius: 24px;
  margin-bottom: 32px;
}
.blog-detail .container .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}
.blog-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.blog-text h3 {
  font-weight: var(--font-medium);
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-line-height);
  color: var(--neutral-950);
}
.blog-text p {
  font-weight: var(--font-normal);
  font-size: var(--text-base);
  line-height: var(--text-base-line-height);
  color: var(--neutral-950);
  text-align: justify;
}
.blog-detail .container img {
  border-radius: 24px;
}
.blog-footer {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.blog-footer h4 {
  font-weight: var(--font-medium);
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-line-height);
  color: var(--neutral-950);
}
.blog-footer .list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.members-box {
  padding: 116px 128px;
}
.members-box .members-box-right {
  max-width: 338px;
}

@media screen and (max-width: 1150px) {
  .blog-detail .container {
    padding: 0 16px;
  }
  .blog-detail .container .image {
    height: 240px;
    margin-bottom: 24px;
  }
  .blog-text h3 {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl-line-height);
  }
  .blog-text p {
    font-size: var(--text-base);
    line-height: var(--text-base-line-height);
  }
  .blog-footer h4 {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl-line-height);
  }
  .blog-footer .list {
    grid-template-columns: 1fr;
  }
  .members-box {
    padding: 64px 32px;
  }
  .members-box .members-box-right {
    max-width: 100%;
  }
}
@media screen and (max-width: 640px) {
  .blog-text {
    gap: 24px;
  }
  .blog-text h3 {
    font-size: var(--text-xl);
    line-height: var(--text-xl-line-height);
  }
  .blog-text p {
    font-size: var(--text-sm);
    line-height: var(--text-sm-line-height);
  }
  .blog-footer h4 {
    font-size: var(--text-xl);
    line-height: var(--text-xl-line-height);
  }
}