/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./assets/src/components/related-post-card/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Container query mixin
 * @param {string|number|list} $value - The breakpoint value.
 * @param {string} $mode - The mode (up or down).
 * @param {string} $name - The name of the container.
 * @example @include container(lg)
 */
/**
 * Icon font mixin
 * @param {string} $content - The icon name.
 * @param {number} $font-size - The font size.
 * @example @include icon-font("arrow-right")
 */
@layer components {
  .related-post-card {
    padding: 1.8rem 0;
    border-top: 0.1rem solid var(--g-color-gray-200);
  }
  .related-post-card__title {
    margin: 0;
    font-family: var(--g-font-primary);
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.42;
  }
  @container ((width >= 992px)) {
    .related-post-card__title {
      font-size: 2.4rem;
    }
  }
  .related-post-card__title a {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: var(--g-color-black);
    text-decoration: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .related-post-card__title a:hover {
      color: var(--g-color-blue-400);
    }
  }
  .related-post-card__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.8rem;
    font-size: 1rem;
    line-height: 1;
  }
  @container ((width >= 992px)) {
    .related-post-card__icon {
      height: 3.4rem;
    }
  }
  .related-post-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-left: 2rem;
    margin-top: 1.2rem;
    color: var(--g-color-base);
    font-family: var(--g-font-secondary);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.42;
  }
  .related-post-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
  }
  .related-post-card__meta span:not(:last-child)::after {
    content: "•";
  }
  .related-post-card__meta span:first-child {
    display: block;
    width: 100%;
  }
  .related-post-card__meta span:first-child::after {
    content: unset;
  }
  @container ((width >= 992px)) {
    .related-post-card__meta span:first-child {
      display: inline-flex;
      width: auto;
    }
    .related-post-card__meta span:first-child::after {
      content: "•";
    }
  }
}

/*# sourceMappingURL=style-index.css.map*/