.health-benefits-related-blogs {
  padding: var(--PT) 0px var(--PB);

  .health-benefits-related-blogs__container {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-template-areas: "heading link" "body body";
    justify-content: space-between;

    .health-benefits-related-blogs__heading {
      font-size: var(--heading-size, 4.6rem);
      font-weight: var(--heading-weight, 400);
      line-height: var(--heading-height, 1.35);
      grid-area: heading;
    }

    .health-benefits-related-blogs__link-wrapper {
      display: flex;
      grid-area: link;
      justify-content: var(--link-align, end);

      .health-benefits-related-blogs__link {
        align-items: center;
        color: var(--main-color, inherit);
        display: flex;
        font-size: var(--link-size, 1.6rem);
        font-weight: var(--link-weight, 700);
        gap: 0.5em;
        line-height: var(--link-height, 1);
        text-decoration: none;
      }
    }

    .health-benefits-related-blogs__body {
      grid-area: body;

      .health-benefits-related-blogs__grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: var(--grid-items, repeat(3, 1fr));
        width: 100%;

        .health-benefits-related-blog__link {
          background: rgb(255 255 255 / 80%);
          border: 1px solid #F1F0EC;
          border-radius: 1.6rem;
          color: inherit;
          display: grid;
          gap: 2.5rem;
          padding: 1.6rem;
          text-decoration: none;

          .health-benefits-related-blog__link-image {
            background-image: var(--image);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 1.2rem;
            padding-bottom: 72.58%;
            position: relative;

            .health-benefits-related-blog__link-badge {
              background: #F2F0EB;
              border-radius: 1.33em;
              font-weight: var(--badge-size, 600);
              font-size: var(--badge-weight, 1.2rem);
              line-height: var(--badge-height, 1);
              padding: 0.33em .66em;
              position: absolute;
              right: 1.33em;
              top: 1.33em;
            }
          }

          .health-benefits-related-blog__link-title {
            font-size: var(--title-size, 2.4rem);
            font-weight: var(--title-weight, 700);
            line-height: var(--title-height, 1.25);
          }

          .health-benefits-related-blog__link-footer {
            align-items: center;
            display: flex;
            font-size: var(--footer-size, 2rem);
            font-weight: var(--footer-weight, 300);
            justify-content: space-between;
            line-height: var(--footer-height, 1.4);
          }
        }
      }
    }
  }

  @media (width < 1024px) {
    .health-benefits-related-blogs__container {
      --grid-items: repeat(2, 1fr);
      --heading-size: 3.2rem;
    }
  }

  @media (width < 768px) {
    .health-benefits-related-blogs__container {
      --grid-items: 100%;
      --link-align: center;

      grid-template-areas: "heading" "body" "link";
    }
  }
}