/**
 * * Function to generate color shades.
 *
 * ? This function takes a base color and a step value as parameters and returns a color shade based on the step value.
 * ? If the step value is positive, the function darkens the color by multiplying the step value with 5.
 * ? If the step value is negative, the function lightens the color by multiplying the absolute value of the step with 10.
 *
 * @param {Color} $color - The base color.
 * @param {Number} $step - The step value.
 * @return {Color} - The generated color shade.
 */
/**
 * * Function to create a color map.
 *
 * ? This function takes a base color as a parameter and generates a color map with shades of the base color.
 * ? The color map is created by iterating over a range of values from 1 to 9 and calling the generate-shades function for each value.
 * ? The generated shades are then merged into the color map using the map-merge function.
 *
 * @param {Color} $color - The base color.
 * @return {Map} - The color map with shades of the base color.
 */
/**
 * * Converts pixels to rems.
 *
 * @param {number} $px - The value in pixels.
 * @return {number} The converted value in rems.
 */
/**
 * * Mixin for creating a flex container with customizable properties.
 *
 * @param {string} $direction - The flex direction. Defaults to 'row'.
 * @param {string} $justify - The flex justify content. Defaults to 'flex-start'.
 * @param {string} $align - The flex align items. Defaults to 'flex-start'.
 * @param {string} $wrap - The flex wrap. Defaults to 'nowrap'.
 * @param {number} $colGap - The column gap. Defaults to 0.
 * @param {number} $rowGap - The row gap. Defaults to 0.
 *
 * ? @example Usage:
 * ?  .container {
 * ?    @include d-flex(row, flex-start, flex-start, nowrap, 10px, 20px);
 * ?  }
 */
/**
 * * @mixin container-query
 * * @description A mixin for creating container queries.
 * 
 * @param {String} $containerName - The name of the container.
 * @param {String} $breakpoint - The breakpoint value.
 * @param {String} $condition - The condition for the container query. Default value is 'lt'.
 * 
 * @returns {CSS} The container query styles.
 */
/**
 * * @mixin container-query-between
 * * @description A mixin for creating container queries between two breakpoints.
 * 
 * @param {String} $containerName - The name of the container.
 * @param {String} $minBreakpoint - The minimum breakpoint value.
 * @param {String} $maxBreakpoint - The maximum breakpoint value.
 * 
 * @returns {Mixin} - The container query mixin.
 */
/**
 * * Mixin for applying line clamp to a text element.
 *
 * @param {number} $lines - The number of lines to clamp the text to. Default is 2.
 * @param {string} $fontSize - The font size of the text. Default is clamp(.8rem, 2vw, 1rem).
 * @param {number} $lineHeight - The line height of the text. Default is 1.5.
 * @param {string} $textAlign - The text alignment. Default is center.
 *
 * ? @example Usage:
 * ? .my-text {
 * ?   @include line-clamp(3, 1rem, 1.2, left);
 * ? }
 */
.gpw-breadcrumbs {
  padding-block: var(--spacing-lg) var(--spacing-xl);
}
.gpw-breadcrumbs p {
  margin: 0;
}
.gpw-breadcrumbs a {
  color: var(--primary-color-500);
  -webkit-transition: color 150ms ease-in-out;
  transition: color 150ms ease-in-out;
}
.gpw-breadcrumbs a:hover {
  color: var(--primary-color-700);
}

.gpw-post-sidebar {
  --_border-color: var(--gray-color-100);
}
.gpw-post-sidebar .widget {
  border: 0.0625rem solid var(--_border-color);
  padding: clamp(var(--spacing-sm), 2cqi, var(--spacing-md));
}
.gpw-post-sidebar .widget-title {
  display: inline-block;
  margin-bottom: var(--spacing-lg);
  font-size: var(--fs-sm);
  color: var(--primary-color-500);
  text-transform: none;
  border-bottom: 0.125rem solid currentColor;
}
.gpw-post-sidebar .widget .is-divider {
  display: none;
}
.gpw-post-sidebar .gpw-most-view-post-widget__item {
  padding-block: var(--spacing-sm);
  display: grid;
  grid-template-columns: 25% minmax(0, 1fr);
  gap: var(--spacing-sm);
  border-color: var(--_border-color);
}
.gpw-post-sidebar .gpw-most-view-post-widget__item a {
  padding: 0;
}
.gpw-post-sidebar .gpw-most-view-post-widget__item-thumbnail {
  display: block;
  aspect-ratio: 4/3;
}
.gpw-post-sidebar .gpw-most-view-post-widget__item-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.gpw-post-sidebar .gpw-most-view-post-widget__item-title {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-align: left;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: pretty;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.gpw-single-main {
  --_side-bar-width: clamp( 15.625rem, 25cqi, 20rem );
  padding-block: 0 var(--spacing-3xl);
}
.gpw-single-main > .section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-lg) var(--spacing-2xl);
}
@container content ( width > 53.125rem ) {
  .gpw-single-main > .section__inner {
    grid-template-columns: minmax(0, 1fr) clamp(15.625rem, 25cqi, 20rem);
  }
}

.gpw-single-content__header {
  margin-bottom: var(--spacing-lg);
}
.gpw-single-content__title {
  font-size: var(--fs-xl);
  color: var(--base-color);
  margin-bottom: var(--spacing-sm);
}
.gpw-single-content__body h2, .gpw-single-content__body h3, .gpw-single-content__body h4, .gpw-single-content__body h5, .gpw-single-content__body h6 {
  color: var(--base-color);
  margin-bottom: var(--spacing-md);
}
.gpw-single-content__body p {
  margin-bottom: var(--spacing-sm);
}
.gpw-single-content__author {
  text-align: right;
  margin-bottom: var(--spacing-md);
}
/*# sourceMappingURL=gpw-single-post-page.min.css.map */