.article-list-wrapper {
  padding: 30px 0; }
  .article-list-wrapper .article-item {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    padding: 0 15px; }
    .article-list-wrapper .article-item .howto-card {
      background: white;
      border-radius: 1.25rem;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      text-decoration: none;
      color: inherit;
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%; }
      .article-list-wrapper .article-item .howto-card:hover {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.13); }
      .article-list-wrapper .article-item .howto-card .card-content {
        padding: 2rem;
        display: flex;
        flex-direction: column;
        height: 100%; }
        @media (max-width: 767px) {
          .article-list-wrapper .article-item .howto-card .card-content {
            padding: 1.5rem; } }
      .article-list-wrapper .article-item .howto-card .card-image {
        width: 100%;
        height: auto;
        background-size: cover;
        background-position: center;
        position: relative; }
        .article-list-wrapper .article-item .howto-card .card-image::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(180deg, transparent 0%, rgba(70, 70, 150, 0.1) 100%);
          transition: all 0.3s ease; }
      .article-list-wrapper .article-item .howto-card .card-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #333;
        line-height: 1.3;
        margin: 0;
        border: 0;
        padding: 0 0 1em 0; }
      .article-list-wrapper .article-item .howto-card .card-category {
        display: inline-block;
        background: #f0f2f5;
        color: #666;
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-weight: 600;
        letter-spacing: 0.5px; }
      .article-list-wrapper .article-item .howto-card .card-meta {
        color: #888;
        font-size: 1.2rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column; }
      .article-list-wrapper .article-item .howto-card .card-categories {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.5rem;
        flex-grow: 1;
        margin-bottom: 0.5rem; }
      .article-list-wrapper .article-item .howto-card .card-date {
        color: #888;
        display: block;
        text-align: right; }

.row.feature_about {
  display: flex;
  flex-wrap: wrap;
  margin: 2em -15px 0; }

.article-detail-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding-top: 20px; }
  .article-detail-wrapper .article-detail-content {
    flex: 1 1 66.666667%;
    padding-right: 30px; }
    .article-detail-wrapper .article-detail-content h2,
    .article-detail-wrapper .article-detail-content h3 {
      margin-top: 2em;
      margin-bottom: 1em; }
    .article-detail-wrapper .article-detail-content h3 {
      border-left: none;
      padding-left: 0; }
    .article-detail-wrapper .article-detail-content dl dt {
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      font-weight: bold; }
    .article-detail-wrapper .article-detail-content dl > dt:first-child {
      margin-top: 0; }
    .article-detail-wrapper .article-detail-content dl dd {
      margin-bottom: 1em; }
      .article-detail-wrapper .article-detail-content dl dd p {
        margin-top: 0.8em; }
  .article-detail-wrapper .article-main-image {
    border-radius: 8px;
    margin-bottom: 20px; }

.article-toc {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  background-color: #f8f8f8;
  border: 1px solid #ddd; }
  .article-toc .toc-title {
    font-size: 1.4em;
    margin-bottom: 10px;
    color: #222;
    border-bottom: none;
    padding-bottom: 0;
    font-weight: bold; }
  .article-toc h2.toc-title {
    margin-top: 0;
    margin-bottom: 10px; }
  .article-toc .toc-list {
    margin: 1em 0; }
    .article-toc .toc-list li {
      margin-bottom: 8px; }
      .article-toc .toc-list li > a {
        display: block; }
  .article-toc .toc-sublist {
    display: none; }

@media (max-width: 767px) {
  .article-detail-wrapper {
    flex-direction: column; }
    .article-detail-wrapper .article-detail-content {
      width: 100%;
      padding-right: 0;
      margin-bottom: 30px; }
    .article-detail-wrapper .category-list-container {
      width: 100%;
      padding-left: 0; } }
.category-list-container {
  flex: 0 0 33.333333%;
  padding-left: 30px; }
  .category-list-container h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    border-bottom: 2px solid #ccc;
    padding-bottom: 5px; }
  .category-list-container .category-list-simple {
    list-style: none;
    padding: 0; }
    .category-list-container .category-list-simple li {
      border-bottom: 1px solid #eee;
      padding: 8px 0; }
      .category-list-container .category-list-simple li:last-child {
        border-bottom: none; }
    .category-list-container .category-list-simple a {
      text-decoration: none;
      color: #333;
      display: block;
      cursor: pointer; }
      .category-list-container .category-list-simple a:hover {
        color: #428bca; }
      .category-list-container .category-list-simple a.mixitup-guide-mixitup-controls-active {
        color: #428bca;
        font-weight: bold; }

.howto-single-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1em; }
  .howto-single-categories .howto-single-category {
    background: #f0f2f5;
    color: #666;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 1.2rem; }