:root {
  /* blogs content */
  --color-text-primary: #000;
  /* date, unactive bread crumb */
  --color-text-secondary: #5A5A66;
  /* text on dark backgrounds */
  --color-text-tertiary: #797979;
  /* links, some headers */
  --color-text-inverse: #fff;
  /* buttons, links */
  --color-text-accent: #3DB28E;

  --color-bg-primary: #fff;
  --color-bg-secondary: #F5F5F5;
  --color-bg-dark: #000;

  --container-paddings: 24px;
  --container-content-max-width: 1280px;

  --blog-content-max-width: 1028px;

  --breakpoint-min-mobile: 345px;
  --breakpoint-tablet: 786px;
  --breakpoint-desktop: 1280px;
}

@media screen and (min-width: 1366px) {
  :root {
    --container-paddings: 32px;
  }
}

/** 
* Common styles 
**/
body {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-primary);
  min-height: 100dvh;

  &>main {
    flex: 1;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin: 0;
  }

  .container {
    max-width: calc(var(--container-content-max-width) + var(--container-paddings) * 2);
    margin: 0 auto;
    padding: 0 var(--container-paddings);
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    padding: 0;
  }

  .icon {
    width: 16px;
    height: 16px;
    mask: no-repeat center/contain;
    background: no-repeat center/contain;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;

    .nav-item {
      .nav-link {
        display: inline-block;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s ease;
      }

      &:hover,
      &.active {
        .nav-link {
          color: var(--color-text-accent) !important;
        }
      }
    }
  }

  .search-toggle {
    .search-icon {
      width: 18px;
      height: 18px;
      mask-image: url(../images/icons/magnifying_glass.svg);
      background-color: var(--color-bg-dark);
    }

    &:hover {
      .icon {
        background-color: #80b2cf;
      }
    }
  }

  input {
    outline: none;
  }

  .search-input-icon {
    width: 17px;
    height: 17px;
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    mask-image: url(../images/icons/magnifying_glass.svg);
    background-color: #B0B0B0;
  }

  .popular-heading,
  .featured-posts-heading {
    font-weight: 600;
    font-size: 20px;
    line-height: 25px;
  }

  .post-card__category {
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: var(--color-text-accent);
  }

  .post-card__footer {
    display: flex;
    margin-top: 12px;
    gap: 12px;
    min-width: 0;
  }

  .post-card__avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    overflow: hidden;
    background: no-repeat center/contain;
    background-image: url(../images/icons/avatar_default.svg);
  }

  .post-card__meta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;

    .post-card__author {
      display: block;
      min-width: 0;
      max-width: 100%;
      height: 18px;
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .post-card__info {
      display: flex;
      /* align-items: center; */
      /* height: 18px; */
      font-size: 14px;
      font-weight: 400;
      line-height: 18px;
      color: #989898;
      gap: 2px;
    }
  }

  .post-card--hover-effect:hover {
    background-color: var(--color-bg-secondary);
    box-shadow: 0 0 0 15px var(--color-bg-secondary);
  }

  @media screen and (min-width: 786px) {

    .popular-heading,
    .featured-posts-heading {
      font-size: 24px;
      line-height: 30px;
    }
  }

  @media screen and (min-width: 1280px) {}
}

/**
* header Styles
**/
body {
  .info-strap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 35px;
    padding-block: 8px;
    background-color: var(--color-bg-dark);

    .info-strap__content {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      width: 100%;
    }

    .info-strap__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;

      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
    }

    .info-strap__text {
      margin: 0;
      font-size: 14px;
      line-height: 18px;
      text-align: center;
      color: var(--color-text-inverse);
    }

    .info-strap__link {
      font-size: 14px;
      line-height: 18px;
      color: var(--color-text-inverse);
      text-decoration: underline;
    }
  }

  header.header {
    min-height: 56px;
    padding: 15px 0;
    border-bottom: 1px solid #DDD;

    .flex-wr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px 24px;

      .header-left,
      .header-right {
        display: flex;
        align-items: center;
      }

      .header-left {
        .menu-btn {
          --menu-btn-color: #415a68;
          display: flex;
          place-items: center;
          width: 24px;
          height: 24px;
          padding: 4px;
          background-color: transparent;
          border: none;
          outline: none;
          position: relative;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;

          span {
            display: block;
            width: 16px;
            height: 2px;
            background: var(--menu-btn-color);
            position: relative;
            border-radius: 1px;

            transition-property: transform, rotate;
            transition-duration: 0.2s;
            transition-timing-function: ease;

            &::after,
            &::before {
              content: "";
              display: block;
              position: absolute;
              width: 16px;
              height: 2px;
              background: var(--menu-btn-color);
              border-radius: 1px;
              transition-property: transform, rotate;
              transition-duration: 0.2s;
              transition-timing-function: ease;
            }

            &::after {
              transform: translateY(5px) rotate(0);
            }

            &::before {
              transform: translateY(-5px) rotate(0);
            }
          }

          &:hover {
            --menu-btn-color: #80b2cf;
          }

          &.active {
            --menu-btn-color: #80b2cf;

            span {
              height: 0;

              &::after {
                transform: translateY(0) rotate(-45deg);
              }

              &::before {
                transform: translateY(0) rotate(45deg);
              }
            }
          }
        }

        .header-logo {
          line-height: 0;
          margin-left: 20px;

          img {
            height: 24px;
            width: auto;
          }
        }
      }

      .header-search {
        display: none;
        flex: 0 0 100%;
        order: 1;

        .search-input {
          width: 100%;
          padding: 8px 16px;
          border: 1px solid silver;
          border-radius: 8px;
          outline: none;
          font-size: 16px;
          line-height: 1.2;
        }

        &.show {
          display: block;
        }
      }

      .header-right {
        justify-content: flex-end;
        gap: 24px;

        .revit-families-link {
          display: none;
        }
      }
    }

    /* Mobile Menu Styles - Mobile First */
    .mobile-menu-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100dvh;
      background-color: #00000000;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;

      .mobile-menu {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 574px;
        height: 100dvh;
        padding: 24px;
        background-color: var(--color-bg-dark);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;

        .mobile-menu-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;
          height: 24px;

          .mobile-menu-logo {
            height: 24px;

            img {
              height: 100%;
              width: auto;
            }
          }

          .mobile-menu-close {
            padding: 5px;
            cursor: pointer;

            .icon {
              mask-image: url(../images/icons/close.svg);
              background-color: #fff;
            }

            &:hover {
              .icon {
                background-color: #80b2cf;
              }
            }
          }
        }

        .mobile-menu-search {
          width: 100%;
          position: relative;
          margin: 32px 0;

          .search-input {
            width: 100%;
            padding: 12px 10px 12px 38px;
            border: none;
            border-radius: 8px;
            background-color: #2D2D2D;
            outline: none;
            color: #B0B0B0;
            font-size: 16px;
            line-height: 1.2;

            &::placeholder {
              color: #B0B0B0;
            }
          }
        }

        nav.mobile-menu-nav {
          .nav-list {
            flex-direction: column;
            gap: 24px;

            .nav-item {
              .nav-link {
                min-width: 120px;
                color: var(--color-text-inverse);
                font-size: 18px;
                line-height: 23px;
              }
            }
          }
        }
      }

      &.active {
        opacity: 1;
        visibility: visible;

        .mobile-menu {
          transform: translateX(0);
        }
      }
    }

    nav.desktop-navigation {
      display: none;
    }
  }

  @media screen and (min-width: 786px) {
    header.header {
      min-height: 78px;
      padding: 20px 0;

      .flex-wr {
        .header-left {
          .header-logo {
            img {
              height: 35px;
            }
          }
        }

        .header-right {
          .revit-families-link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            height: 38px;
            text-decoration: none;
            color: var(--color-text-primary);
            font-size: 14px;
            font-weight: 700;
            line-height: 18px;
            padding: 10px 16px;
            border-radius: 30px;
            border: 1px solid #3DB28E;

            .revit-families-icon {
              width: 24px;
              height: 24px;
              background-size: 17px;
              background-image: url(../images/icons/revit-icon.svg);
            }
          }
        }
      }

      .mobile-menu-overlay {
        .mobile-menu {
          padding-top: 28px;

          .mobile-menu-header {
            .mobile-menu-logo {
              height: 35px;
            }

            .mobile-menu-close {
              padding: 5;
              cursor: pointer;

              .btn-icon {
                width: 14px;
                height: 14px;
                mask-image: url(../images/icons/close.svg);
                background-color: #fff;

                &:hover {
                  background-color: #80b2cf;
                }
              }
            }
          }

          .mobile-menu-search {
            margin-top: 38px;
          }
        }
      }
    }
  }

  @media screen and (min-width: 900px) {
    header.header {
      .flex-wr {
        .header-search {
          order: 0;
          flex: 1 0 50px;
          margin-top: 0;
        }
      }
    }
  }

  @media screen and (min-width: 1280px) {
    header.header {
      padding: 30px 0 15px;

      .flex-wr {
        .header-left {
          .menu-btn {
            display: none;
          }

          .header-logo {
            margin: 0;

            img {
              height: 35px;
            }
          }
        }

        .header-search {
          display: none !important;
        }

        .header-right {
          .search-toggle {
            display: none;
          }
        }
      }

      .mobile-menu-overlay {
        display: none;
      }

      nav.desktop-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 38px;
        margin-top: 32px;
        gap: 32px;


        .nav-list {
          gap: 66px;
          max-width: 860px;

          .nav-item {
            .nav-link {
              color: var(--color-text-primary);
              font-size: 16px;
              line-height: 20px;
            }
          }
        }

        .nav-search {
          display: flex;
          align-items: center;
          gap: 24px;

          .nav-search-input {
            display: none;
            width: 260px;
            padding: 8px 16px;
            border: 1px solid silver;
            border-radius: 8px;
            outline: none;
            font-size: 16px;
            line-height: 1.2;

            &.show {
              display: block;
            }
          }

          .search-toggle {
            flex: 0 0 25px;
            padding: 2px;
            cursor: pointer;

            .search-icon {
              width: 21px;
              height: 21px;
              mask-size: 21px;
            }
          }
        }
      }
    }
  }
}

/**
* Breadcrumb Styles
**/
body {
  .breadcrumb-nav {
    margin-top: 20px;

    .breadcrumb-list {
      display: flex;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 8px;
      overflow: hidden;

      .breadcrumb-item .breadcrumb-link,
      .breadcrumb-item .breadcrumb-text,
      .breadcrumb-separator {
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
        height: 20px;
      }

      .breadcrumb-item {
        flex-shrink: 0;
        height: 20px;

        .breadcrumb-link {
          color: var(--color-text-tertiary);
          text-decoration: none;

          &:hover {
            color: var(--color-text-accent);
          }
        }

        .breadcrumb-text {
          display: inline-block;
          max-width: 100%;
          color: var(--color-text-primary);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &.breadcrumb-current {
          flex-shrink: 1;
          min-width: 0;
          overflow: hidden;
        }
      }

      .breadcrumb-separator {
        color: var(--color-text-secondary);
        flex-shrink: 0;
      }
    }
  }

  @media screen and (min-width: 786px) {
    .breadcrumb-nav {
      margin-top: 24px;
    }
  }

  @media screen and (min-width: 1280px) {
    .breadcrumb-nav {
      margin-top: 33px;
    }
  }
}

/**
* Revit Families Aside Styles
**/
body {
  .external-search {
    background: var(--color-bg-secondary);
    margin-top: 16px;
    padding: 20px 0;

    .container {
      .external-search__content {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .external-search__link {
          margin-top: 12px;
          font-size: 14px;
          font-weight: 400;
          line-height: 18px;
          text-align: center;
          color: var(--color-text-accent);
          text-decoration: none;
          align-self: center;
        }

        .desktop-wrapper {
          .external-search__title {
            font-size: 20px;
            line-height: 28px;
            font-weight: 600;
            text-align: center;
          }

          .external-search__link {
            display: none;
          }
        }

        .external-search__form {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 16px;
          margin-top: 12px;

          .input-wrapper {
            flex-grow: 2;
            position: relative;

            input {
              width: 100%;
              height: 42px;
              border-radius: 8px;
              border: 1px solid #DDD;
              padding: 11px 12px 12px 38px;

              &::placeholder {
                color: #B0B0B0;
              }
            }
          }

          .external-search__btn {
            flex-basis: 84px;
            height: 42px;
            border-radius: 30px;
            background-color: var(--color-text-accent);
            color: #FFF;
            cursor: pointer;

            .search-submit-icon {
              width: 20px;
              height: 20px;
              mask-image: url(../images/icons/magnifying_glass.svg);
              background-color: #FFF;
            }

            .search-submit-text {
              display: none;
            }
          }
        }
      }
    }
  }

  @media screen and (min-width: 786px) {
    .external-search {
      margin-top: 20px;
    }
  }

  @media screen and (min-width: 1280px) {
    .external-search {
      background: none;
      margin-top: 43px;
      padding: 0;

      .container {
        .external-search__content {
          background-color: var(--color-bg-secondary);
          padding: 26px 37px 26px 48px;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          gap: 4px 16px;
          border-radius: 10px;

          .external-search__link {
            display: none;
          }

          .desktop-wrapper {
            flex: 0 0 540px;

            .external-search__title {
              font-size: 22px;
              line-height: 28px;
              text-align: start;
            }

            .external-search__link {
              display: flex;
              font-weight: 400;
              font-size: 16px;
              line-height: 20px;
              margin-top: 4px;
              justify-self: flex-start;
            }
          }

          .external-search__form {
            flex: 1 1 auto;
            min-width: 400px;
            margin-top: 0;

            .external-search__btn {
              flex-basis: 128px;
              height: 42px;
              padding: 10px 32px;

              .search-submit-icon {
                display: none;
              }

              .search-submit-text {
                display: inline;
                font-weight: 600;
                font-size: 18px;
                line-height: 23px;
                text-align: center;
              }
            }
          }

          .external-search__link {
            flex: 0 0 540px;
            text-align: left;
            margin-top: 0;
          }
        }
      }
    }
  }
}

/**
* Main Content Styles.
* Main hero post + popular posts grid
**/
body {
  --hero-container-paddings: 20px;

  .main-content {
    margin-top: 16px;

    .hero-and-popular-grid {
      padding-bottom: 4px;

      .hero-post {
        position: relative;

        .hero-post__link {
          display: block;
          position: relative;
          overflow: hidden;

          .hero-post__image {
            display: block;
            position: relative;
            inset: 0;
            width: 100%;
            height: auto;
            overflow: hidden;
          }

          .hero-post__image img {
            display: block;
            position: relative;
            inset: 0;
            width: 100%;
            height: auto;
          }

          .hero-post__image::after {
            content: "";
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg,
                rgba(2, 2, 3, 0) 0%,
                rgba(2, 2, 3, 0.9) 100%);
          }

          .hero-post__content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            color: var(--color-text-inverse);
            padding: 30px var(--hero-container-paddings);
            min-width: 0;

            .hero-post__header {
              .hero-post__category {
                font-weight: 400;
                font-size: 16px;
                line-height: 100%;
              }

              .hero-post__title {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                overflow: hidden;
                font-weight: 700;
                font-size: 24px;
                line-height: 30px;
                margin-top: 13px;
              }
            }

            .hero-post__footer {
              display: flex;
              align-items: center;
              margin-top: 16px;
              min-width: 0;

              .hero-post__avatar {
                display: none;
              }
            }
          }
        }
      }

      .popular-posts {
        max-width: calc(var(--container-content-max-width) + var(--hero-container-paddings) * 2);
        margin: 24px auto 0;
        padding: 0 var(--hero-container-paddings);

        .popular-list {
          margin: 16px 0 0;
          list-style: none;
          padding: 0;

          .popular-list__item {
            border-top: 1px solid #ddd;
            padding: 20px 0 20px;

            &:first-child {
              padding-top: 16px;
            }

            .popular-post {
              .popular-post__link {
                display: flex;
                align-items: flex-start;
                text-decoration: none;
                color: var(--color-text-primary);
                border-radius: 2px;
                gap: 20px;
                cursor: pointer;

                &:hover {
                  background-color: var(--color-bg-secondary);
                  box-shadow: 0 0 0 15px var(--color-bg-secondary);
                }

                .popular-post__content {
                  .popular-post__title {
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 26px;
                  }

                  .popular-post__meta-text {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 2px 12px;
                    margin-top: 8px;

                    .popular-post__byline,
                    .popular-post__info {
                      min-height: 18px;
                      font-size: 14px;
                      line-height: 18px;
                    }

                    .popular-post__byline {
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                      line-clamp: 2;
                      overflow: hidden;

                      .popular-post__category {
                        color: var(--color-text-accent);
                      }
                    }

                    .popular-post__info {
                      color: var(--color-text-tertiary);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  @media screen and (min-width: 786px) {
    --hero-container-paddings: 24px;

    .main-content {
      margin-top: 20px;

      .hero-and-popular-grid {
        .hero-post {
          .hero-post__link {
            .hero-post__content {
              padding: 54px 32px 54px 43px;

              .hero-post__header {
                .hero-post__title {
                  font-size: 36px;
                  font-weight: 700;
                  line-height: 46px;
                  margin-top: 12px;
                }
              }

              .hero-post__footer {
                margin-top: 16px;
                gap: 12px;

                .hero-post__avatar {
                  display: block;
                }
              }
            }
          }
        }

        .popular-posts {
          .popular-list {
            .popular-list__item {
              .popular-post {
                .popular-post__link {
                  .popular-post__content {
                    .popular-post__title {
                      font-size: 20px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  @media screen and (min-width: 1280px) {
    --hero-container-paddings: 32px;

    .main-content {
      margin-top: 61px;

      .hero-and-popular-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 54px;
        max-width: calc(var(--container-content-max-width) + var(--hero-container-paddings) * 2);
        margin: 0 auto;
        padding: 0 var(--hero-container-paddings);

        .hero-post {
          min-width: 800px;
          flex: 0 0 800px;

          .hero-post__link {
            display: block;
            position: relative;
            overflow: hidden;
            border-radius: 10px;

            .hero-post__image {
              height: 500px;
            }

            .hero-post__image img {
              height: 100%;
              object-fit: cover;
            }

            .hero-post__content {
              padding: 54px 32px 43px 44px;

              .hero-post__header {
                .hero-post__title {
                  font-size: 40px;
                  font-weight: 700;
                  line-height: 51px;
                }
              }
            }
          }
        }

        .popular-posts {
          max-width: none;
          margin: 0;
          padding: 0;

          .popular-list {
            .popular-list__item {
              padding: 16px 0 16px;

              .popular-post {
                .popular-post__link {
                  display: grid;
                  grid-template-columns: 38px 1fr;
                  grid-template-areas:
                    "title title"
                    "avatar meta";
                  align-items: start;
                  padding: 16px;
                  gap: 8px 12px;
                  border-radius: 10px;

                  &:hover {
                    box-shadow: none;
                  }

                  .popular-post__avatar {
                    grid-area: avatar;
                  }

                  .popular-post__content {
                    display: contents;

                    .popular-post__title {
                      grid-area: title;
                      display: -webkit-box;
                      -webkit-line-clamp: 2;
                      line-clamp: 2;
                      -webkit-box-orient: vertical;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    }

                    .popular-post__meta-text {
                      grid-area: meta;
                      display: flex;
                      flex-direction: column;
                      margin: 0;

                      .popular-post__byline {
                        -webkit-line-clamp: 1;
                        line-clamp: 1;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/**
* Main Content Styles.
* Featured block
**/
body {
  .main-content {
    .featured-posts {
      margin: 16px 0 4px;

      .featured-posts-heading {
        padding: 0 0 16px;
        border-bottom: 1px solid #ddd;
      }

      .featured-list {
        margin: 0;
        list-style: none;
        padding: 0;

        .featured-list__item {
          padding: 20px 0 20px;

          &:first-child {
            padding-top: 30px;
          }

          .featured-post {
            .featured-post__link {
              display: flex;
              flex-wrap: wrap;
              align-items: flex-start;
              text-decoration: none;
              color: var(--color-text-primary);
              border-radius: 2px;
              gap: 13px 16px;
              cursor: pointer;

              &:hover {
                background-color: var(--color-bg-secondary);
                box-shadow: 0 0 0 15px var(--color-bg-secondary);
              }

              .featured-post__image {
                img {
                  width: 100%;
                  height: auto;
                  border-radius: 10px;
                  object-fit: cover;
                }
              }

              .featured-post__content {
                min-width: 0;

                .featured-post__header {

                  .featured-post__title {
                    font-size: 24px;
                    font-weight: 600;
                    line-height: 30px;
                    margin-top: 12px;
                  }
                }

                .featured-post__footer {

                  .featured-post__meta-text {
                    .featured-post__info {
                      flex-wrap: wrap;
                    }
                  }
                }
              }
            }
          }

          &:not(:first-child) {
            .featured-post {
              .featured-post__link {
                flex-wrap: nowrap;

                .featured-post__image {
                  img {
                    width: 120px;
                    height: 112px;
                    object-fit: cover;
                  }
                }

                .featured-post__content {
                  .featured-post__header {
                    .featured-post__title {
                      font-size: 16px;
                      font-weight: 600;
                      line-height: 22px;
                      margin-top: 8px;

                      display: -webkit-box;
                      -webkit-line-clamp: 2;
                      line-clamp: 2;
                      -webkit-box-orient: vertical;
                      overflow: hidden;
                    }
                  }

                  .featured-post__footer {
                    margin-top: 8px;

                    .featured-post__avatar {
                      display: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    @media screen and (min-width: 786px) {
      .featured-posts {
        margin-top: 25px;

        .featured-list {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 40px 20px;
          padding: 0 0 30px;

          .featured-list__item {
            &:first-child {
              grid-column: 1 / -1;
              padding: 30px 0 0;
              order: 1;

              .featured-post {
                .featured-post__link {
                  display: flex;
                  max-width: fit-content;
                  justify-content: flex-start;
                  width: max-content;
                  flex-direction: column;
                }
              }
            }

            &:not(:first-child) {
              padding: 0;

              .featured-post {
                .featured-post__link {
                  display: flex;
                  align-items: stretch;

                  .featured-post__image {
                    img {
                      width: 186px;
                      height: 175px;
                    }
                  }

                  .featured-post__content {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    min-width: 0;

                    .featured-post__header {
                      .featured-post__title {
                        font-size: 18px;
                        line-height: 24px;
                        -webkit-line-clamp: 4;
                        line-clamp: 4;
                        margin-top: 11px;
                      }
                    }

                    .featured-post__footer {
                      margin: 0 0 8px;
                    }
                  }
                }
              }
            }

            &:nth-child(2) {
              order: 2;
            }

            &:nth-child(3) {
              order: 4;
            }

            &:nth-child(4) {
              order: 3;
            }

            &:nth-child(5) {
              order: 5;
            }
          }
        }
      }
    }

    @media screen and (min-width: 1280px) {
      .featured-posts {
        margin-top: 49px;

        .featured-list {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          grid-template-rows: auto auto;
          gap: 40px;
          padding: 30px 0;

          .featured-list__item {
            &:first-child {
              grid-column: 1;
              grid-row: 1/3;
              padding: 0;

              .featured-post {
                height: 100%;

                .featured-post__link {
                  display: flex;
                  flex-direction: column;
                  max-width: 100%;
                  min-width: 0;
                  height: 100%;

                  .featured-post__image {
                    max-width: 100%;
                    min-width: 0;

                    img {
                      width: 100%;
                      max-width: 100%;
                      height: auto;
                    }
                  }

                  .featured-post__content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    max-width: 100%;
                    min-width: 0;

                    .featured-post__header {
                      min-width: 0;

                      .featured-post__title {
                        display: -webkit-box;
                        -webkit-line-clamp: 4;
                        line-clamp: 4;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        word-wrap: break-word;
                        overflow-wrap: break-word;
                      }
                    }

                    .featured-post__footer {
                      min-width: 0;

                      .featured-post__meta-text {
                        min-width: 0;

                        .featured-post__author {
                          min-width: 0;
                        }
                      }
                    }
                  }
                }
              }
            }

            &:nth-child(2) {
              grid-column: 2;
              grid-row: 1;
            }

            &:nth-child(3) {
              grid-column: 3;
              grid-row: 1;
            }

            &:nth-child(4) {
              grid-column: 2;
              grid-row: 2;
            }

            &:nth-child(5) {
              grid-column: 3;
              grid-row: 2;
            }

            &:not(:first-child) {
              padding: 0;

              .featured-post {
                .featured-post__link {
                  display: flex;
                  flex-direction: row;
                  align-items: stretch;

                  .featured-post__image {
                    img {
                      width: 186px;
                      height: 175px;
                      object-fit: cover;
                    }
                  }

                  .featured-post__content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .featured-post__header {
                      .featured-post__title {
                        font-size: 18px;
                        line-height: 24px;
                        margin-top: 11px;
                      }
                    }

                    .featured-post__footer {
                      margin-top: auto;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/**
* Main Content Styles.
* Latest Posts block
**/
body {
  .main-content {
    .latest-posts {
      .latest-list {
        margin: 0;
        list-style: none;
        padding: 15px 0 24px;
        border-bottom: 1px solid #ddd;

        .latest-list__item {
          padding: 15px 0;

          .latest-post {
            .latest-post__link {
              display: flex;
              flex-wrap: wrap;
              align-items: flex-start;
              text-decoration: none;
              color: var(--color-text-primary);
              border-radius: 2px;
              gap: 13px 16px;
              cursor: pointer;

              .latest-post__image {
                display: block;
                width: 100%;
                border-radius: 10px;
                overflow: hidden;

                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 10px;
                  object-fit: cover;
                }
              }

              .latest-post__content {
                min-width: 0;

                .latest-post__header {

                  .latest-post__title {
                    display: -webkit-box;
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 26px;
                    margin-top: 12px;

                    -webkit-line-clamp: 3;
                    line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                }
              }
            }
          }
        }
      }
    }

    @media screen and (min-width: 786px) {
      .latest-posts {
        .latest-list {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 32px 26px;
          padding-top: 38px;

          .latest-post__image {
            aspect-ratio: 16 / 9;
          }


          .latest-list__item {
            padding: 0;
          }
        }
      }
    }

    @media screen and (min-width: 1280px) {
      .latest-posts {
        .latest-list {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 56px 40px;
          padding: 54px 0 36px;

          .latest-list__item {
            &.latest-list__item--ad {
              border-radius: 10px;
              overflow: hidden;

              .latest-post--ad {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 400px;
                background-color: #F1F1F1;

                .google-ads-container {
                  display: flex;
                  justify-content: center;
                }

                .adsbygoogle {
                  display: block !important;
                }
              }
            }
          }
        }
      }
    }
  }
}

/**
* Main Content Styles.
* Pagination block
**/
body {
  .pagination {
    display: flex;
    justify-content: center;
    margin: 16px 0;

    .pagination__list {
      display: flex;
      align-items: center;
      list-style: none;
      padding: 0;
      margin: 0;

      .pagination__list-item {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 8px;

        .pagination__link {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          border-radius: 8px;
          text-decoration: none;
          transition: all 0.2s ease;
          font-size: 14px;
          font-weight: 400;
          color: #9F9F9F;

          &.pagination__link--first,
          &.pagination__link--prev,
          &.pagination__link--next,
          &.pagination__link--last {
            border: 1px solid #F1F1F1;
            background-size: 24px;
            background-color: var(--color-bg-primary);
          }

          &.pagination__link--first,
          &.pagination__link--last {
            background-image: url(../images/icons/chevron-left-double.svg);

            &:hover {
              background-image: url(../images/icons/chevron-left-double-white.svg);
            }
          }

          &.pagination__link--prev,
          &.pagination__link--next {
            background-image: url(../images/icons/chevron-left.svg);

            &:hover {
              background-image: url(../images/icons/chevron-left-white.svg);
            }
          }

          &.pagination__link--last,
          &.pagination__link--next {
            transform: rotate(180deg);
          }

          &:hover {
            background-color: #000;
            color: #fff;

            &::before {
              border-color: #000;
            }
          }

          &.active {
            background-color: #000;
            color: #fff;
            pointer-events: none;

            &::before {
              border-color: #000;
            }
          }
        }

        .pagination__ellipsis {
          display: flex;
          justify-content: center;
          align-items: flex-end;
          width: 100%;
          height: 100%;
          color: #999;
          font-size: 16px;
          padding-bottom: 9px;
        }

        &:has(.pagination__link--first),
        &:has(.pagination__link--last) {
          display: none;
        }

        &:has(.pagination__link--prev) {
          margin-right: 8px;
        }

        &:has(.pagination__link--next) {
          margin-left: 8px;
        }
      }
    }

    @media screen and (min-width: 420px) {
      .pagination__list {
        gap: 8px;
      }
    }

    @media screen and (min-width: 786px) {
      margin: 20px 0;

      .pagination__list {
        gap: 16px;

        .pagination__list-item {

          &:has(.pagination__link--first),
          &:has(.pagination__link--last) {
            display: list-item;
          }
        }
      }
    }

    @media screen and (min-width: 1280px) {
      margin: 24px 0 72px;
    }
  }
}

/**
* Footer Styles.
**/
body {
  .footer {
    --color-text-footer: #919191;
    color: var(--color-text-footer);
    background-color: var(--color-bg-dark);
    padding-block: 38px;
    font-family: Lato, "Be Vietnam Pro", sans-serif;
    letter-spacing: 0.1px;

    a {
      text-decoration: none;
      color: var(--color-text-footer);
      transition: all 0.2s ease-in-out;

      &:hover {
        color: var(--color-text-accent);
      }
    }

    .flex-wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 42px;
      width: 100%;

      .footer__main {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 16px 32px;
        width: 100%;


        .contact-block {
          max-width: 265px;

          .logo {
            img {
              width: 175px;
              height: auto;
            }
          }

          .footer__contacts {
            display: flex;
            flex-direction: column;
            margin-top: 21px;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            font-style: normal;
            gap: 24px;

            .footer__office {
              display: flex;
              flex-direction: column;
            }

            .footer__contact-title,
            a[href^="tel"],
            a[href^="mailto"] {
              font-weight: 400;
              color: var(--color-text-inverse);
            }

            a[href^="tel"] {
              margin-top: 24px;
            }
          }
        }

        .footer__links {
          display: contents;

          .footer__links--block {
            .footer__links_title {
              color: var(--color-text-inverse);
              font-size: 16px;
              font-weight: 700;
              line-height: 19px;
            }

            .footer__links--list {
              display: flex;
              flex-direction: column;
              list-style: none;
              margin: 24px 0 0;
              padding: 0;
              font-size: 16px;
              font-weight: 400;
              line-height: 30px;
            }
          }
        }
      }

      .footer__subscribe {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 28px 26px;
        background-color: #2D2D2D;
        border-radius: 20px;
        gap: 22px;
        position: relative;

        h3 {
          font-size: 16px;
          font-weight: 700;
          line-height: 20px;
          letter-spacing: 0px;
          text-align: center;
          color: var(--color-text-inverse);
        }

        .footer__subscribe-form {
          display: flex;
          flex-direction: column;
          gap: 24px;

          .footer__subscribe-input {
            width: 100%;
            height: 46px;
            border-radius: 60px;
            background-color: var(--color-bg-primary);
            color: var(--color-text-primary);
            padding: 13px 18px;

            &::placeholder {
              color: var(--color-text-tertiary);
            }
          }

          .footer__subscribe-btn {
            width: 100%;
            height: 42px;
            border-radius: 21px;
            background-color: #3DB28E;
            color: var(--color-text-inverse);
            font-size: 18px;
            font-weight: 700;
            line-height: 22px;
            letter-spacing: 0px;
            cursor: pointer;
          }
        }

        .footer__subscribe--spinner-wrapper {
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          display: none;
          align-items: center;
          justify-content: center;
          background-color: rgb(0 0 0 / 60%);

          .spinner {
            width: 48px;
            height: 48px;
            background: no-repeat center/contain url(../images/spinner.svg);
          }

          &.active {
            display: flex;
          }
        }
      }
    }

    .footer__bottom {
      display: flex;
      flex-direction: column;
      margin-top: 42px;
      gap: 16px;

      .footer__legal-links {
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        color: #7A7A7A;

        .divider {
          margin: 0 8px;
        }
      }

      .footer__social-media {
        display: flex;
        gap: 16px;

        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;

          svg {
            height: 16px;
            fill: white;
            transition: fill 0.3s ease;
          }

          &.facebook {
            width: 10px;
          }

          &.xtwitter,
          &.pinterest {
            width: 16px;
          }

          &.youtube {
            width: 18px;
          }

          &.linkedin,
          &.instagram {
            width: 14px;
          }

          &:hover {
            svg {
              fill: var(--color-text-accent);
            }
          }
        }
      }

      small {
        font-size: 14px;
        line-height: 17px;
        color: var(--color-text-inverse);
      }
    }
  }

  @media screen and (min-width: 1280px) {
    .footer {
      padding-block: 86px 44px;

      .flex-wrap {
        align-items: flex-start;
        gap: 72px;

        .footer__main {
          gap: 16px 129px;
          width: auto;

          .contact-block {
            .footer__contacts {
              margin-top: 32px;
            }
          }
        }

        .footer__subscribe {
          justify-content: flex-start;
          width: 311px;
        }
      }

      .footer__bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 68px;

        .footer__social-media {
          margin-left: 365px;
        }
      }
    }
  }
}

/**
* Modal Styles.
**/
body {
  .subscribe-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    &.active {
      display: flex;
    }

    .subscribe-modal__overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      cursor: pointer;
    }

    .subscribe-modal__content {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      z-index: 10000;
      padding: 28px 26px;
      background-color: #2D2D2D;
      border-radius: 20px;
      font-family: Lato, "Be Vietnam Pro", sans-serif;


      p {
        font-size: 16px;
        font-weight: 700;
        line-height: 19px;
        text-align: center;
        color: #FFFFFF;
      }

      .subscribe-modal__close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 341px;
        background-color: var(--color-text-accent);
        color: white;
        border: none;
        padding: 9px 24px;
        border-radius: 21px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;

        .icon {
          width: 24px;
          height: 24px;
          background-image: url(../images/icons/check_ok.min.svg);
        }
      }

      .subscribe-modal__close-btn:hover {
        background-color: #2a9272;
      }
    }

    &.subscribe-modal--error {
      .subscribe-modal__content {
        .subscribe-modal__close-btn {
          background-color: red;

          .icon {
            background-image: url(../images/icons/check_fail.svg);
          }
        }
      }
    }

    @media screen and (min-width: 393px) {
      .subscribe-modal__content {
        .subscribe-modal__close-btn {
          padding-inline: 78px;
        }
      }
    }
  }
}

/**
* Main Contant Sytles.
* Blog Details block.
* Comments block.
**/
body {
  .main-content {

    .post-container {
      max-width: calc(var(--blog-content-max-width) + var(--container-paddings) * 2);
    }

    .blog-post {
      margin-bottom: 24px;

      .post-header {
        .post__title {
          font-size: 24px;
          font-weight: 700;
          line-height: 30px;
        }

        .post__details {
          display: flex;
          /* align-items: center; */
          margin-top: 12px;
          gap: 12px;

          .post__meta-text {
            flex-wrap: wrap;
            gap: 0 16px;

            .post__author {
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              min-width: 0;
              white-space: normal;
              height: auto;

              font-size: 16px;
              line-height: 20px;
            }

            .post__info {
              flex-wrap: wrap;
              font-size: 16px;
              line-height: 20px;
              color: #989898;
              gap: 0 2px;

              .post-category {
                color: var(--color-text-accent);
              }
            }
          }
        }
      }

      .post-image-wrapper {
        margin-top: 16px;

        .post-image {
          img {
            display: block;
            max-width: 100%;
            height: auto;
            margin: 0 auto;
          }
        }
      }

      .post-content {
        width: 100%;
        /* display: flex;
        flex-direction: column;
        gap: 24px; */
        margin-top: 24px;

        font-size: 18px;
        font-weight: 400;
        line-height: 28px;
        letter-spacing: 0px;
        color: #5A5A66;

        ul,
        ol {
          margin: 0;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          color: var(--color-text-primary);
          font-weight: 600;
          letter-spacing: 0px;
          line-height: 1.5em;
        }

        h2 {
          font-size: 24px;
          line-height: 30px;
        }

        h3 {
          font-size: 20px;
          line-height: 25px;
        }

        h4 {
          font-size: 18px;
          font-weight: 700;
          line-height: 28px;
        }

        h5 {
          font-size: 16px;
        }

        h6 {
          font-size: 14px;
        }

        p {
          margin-block: 24px;
        }

        figure {
          margin: 0 0 1rem;
        }

        img {
          border-radius: 10px;
          max-width: 100%;
          height: auto;
        }

        a {
          text-decoration: none;
          color: var(--color-text-accent);
          transition: all 0.2s ease-in-out;
        }
      }
    }

    .comments {
      border-top: 1px solid #DDD;
      padding-block: 24px;

      .form-container {
        margin-bottom: 24px;

        .comment-form {
          display: flex;
          flex-direction: column;
          padding: 12px;
          gap: 12px;
          border-radius: 8px;
          border: 1px solid #DDD;
          font-size: 16px;
          font-weight: 400;
          line-height: 20px;

          .comment-locked-message {
            color: #B0B0B0;

            .comment-link {
              color: var(--color-text-accent);
            }
          }

          .comment-text {
            width: 100%;
            min-height: 96px;
            height: auto;
            resize: none;
            border: none;
            outline: none;
            overflow: hidden;
          }

          .comment-btn {
            padding: 12px 48px;
            background-color: #3DB28E;
            color: var(--color-text-inverse);
            border: none;
            border-radius: 21px;
            cursor: pointer;
            transition: background-color 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;

            &:hover:not([disabled]) {
              background-color: #359977;
            }

            &[disabled] {
              background-color: #CFCFCF;
              cursor: default;
            }

            &.loading {
              pointer-events: none;
            }

            .btn-loader {
              width: 20px;
              height: 20px;
              display: inline-block;
              animation: spin 1s linear infinite;
            }
          }
        }

        .comment-error {
          .error-message {
            color: red;
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
          }
        }
      }

      .comment-list {
        display: flex;
        flex-direction: column;
        list-style-type: none;
        padding: 0;
        margin: 0;
        gap: 24px;

        .comment-item {
          &.comment-highlight {
            background-color: #E8F5F1;
            border-radius: 8px;
            transition: all 1.5s ease-out;
            box-shadow: 0 0 0 15px #E8F5F1;
          }

          .comment {
            display: flex;
            flex-direction: column;
            gap: 12px;

            .comment-text {
              font-size: 14px;
              font-weight: 400;
              line-height: 24px;
              letter-spacing: 0px;
              color: var(--color-text-secondary);
            }

            .comment-footer {
              display: flex;
              gap: 12px;

              .comment-avatar {
                flex: 0 0 28px;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                overflow: hidden;
                background: no-repeat center/contain;
              }

              .comment__meta-text {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                font-size: 14px;
                line-height: 18px;
                gap: 4px;

                .comment__author {
                  font-weight: 700;
                }

                .comment__info {
                  font-weight: 400;
                  color: #797979;
                }
              }
            }
          }
        }
      }
    }

    @media screen and (min-width: 786px) {
      .blog-post {
        margin-bottom: 20px;

        .post-header {
          .post__title {
            font-size: 36px;
            line-height: 46px;
            margin-top: 4px;
          }
        }

        .post-image-wrapper {
          margin-top: 24px;
        }

        .post-content {
          h3 {
            font-size: 20px;
            font-weight: 700;
            line-height: 28px;
          }

          h4 {
            font-size: 20px;
            font-weight: 600;
            line-height: 25px;
          }

          h5 {
            font-size: 18px;
          }

          h6 {
            font-size: 16px;
          }
        }
      }

      .comments {
        .form-container {

          .comment-form {
            flex-direction: row;

            .comment-btn {
              align-self: flex-end;
            }
          }
        }
      }
    }

    @media screen and (min-width: 1280px) {
      margin: 56px 0 36px;

      .blog-post {
        margin-bottom: 36px;

        .post-header {
          .post__title {
            font-size: 48px;
            line-height: 60px;
          }
        }

        .post-image-wrapper {
          max-width: calc(var(--blog-content-max-width) + var(--container-paddings) * 2);
          margin: 36px auto 0;
          padding: 0 var(--container-paddings);

          .post-image {
            img {
              border-radius: 10px;
            }
          }
        }

        .post-content {
          gap: 36px;
          margin-top: 36px;

          h2 {
            font-size: 32px;
            line-height: 40px;
          }

          h3 {
            font-size: 24px;
            font-weight: 700;
            line-height: 28px;
          }

          h4 {
            font-size: 24px;
            font-weight: 600;
            line-height: 25px;
          }

          h5 {
            font-size: 20px;
          }

          h6 {
            font-size: 18px;
          }
        }
      }

      .comments {
        padding-block: 36px;

        .form-container {
          margin-bottom: 36px;

          form.comment-form {
            min-height: 96px;
          }
        }

        .comment-list {
          gap: 36px;
        }
      }
    }
  }
}

/**
* Main Content Styles.
* Related Posts block
**/
body {
  .main-content {
    .related-posts {
      margin: 24px 0;

      .related-posts__header {
        font-size: 20px;
        font-weight: 700;
        line-height: 30px;
        letter-spacing: 1.2px;
      }

      .post-list {
        margin: 0;
        list-style: none;
        padding: 16px 0 0;

        .post-list__item {
          padding: 12px 0;

          &:nth-child(3) {
            display: none;
          }

          .related-post {
            .related-post__link {
              display: flex;
              flex-wrap: wrap;
              align-items: flex-start;
              text-decoration: none;
              color: var(--color-text-primary);
              border-radius: 2px;
              gap: 13px 16px;
              cursor: pointer;

              .related-post__image {
                display: block;
                width: 100%;
                aspect-ratio: 16 / 9;
                border-radius: 10px;
                overflow: hidden;

                img {
                  width: 100%;
                  height: 100%;
                  border-radius: 10px;
                  object-fit: cover;
                }
              }

              .related-post__content {
                min-width: 0;

                .related-post__header {

                  .related-post__title {
                    display: -webkit-box;
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 26px;
                    margin-top: 12px;

                    -webkit-line-clamp: 3;
                    line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                  }
                }

              }
            }
          }
        }
      }
    }

    @media screen and (min-width: 786px) {
      .related-posts {
        margin: 24px 0 42px;

        .post-list {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 32px 26px;
          padding-top: 30px;

          .post-list__item {
            padding: 0;
          }
        }
      }
    }

    @media screen and (min-width: 1280px) {
      .related-posts {
        margin: 54px 0 76px;

        .related-post__header {
          font-size: 24px;
          font-weight: 700;
          line-height: 35px;
        }

        .post-list {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 56px 40px;
          padding: 28px 0 36px;

          .post-list__item {

            &:nth-child(3) {
              display: list-item;
            }

            .related-post {
              .related-post__link {
                gap: 0;
              }
            }
          }
        }
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}