.blog-widget {
  position: relative;
  margin-top: calc(-1 * var(--section-spacing));
  padding-top: calc(var(--section-spacing) * 2);
  padding-bottom: calc(var(--section-spacing) * 2);
  background-color: var(--c-gray-600);
  color: var(--c-white);
  z-index: 1;
  .container {
    .section-title {
      margin-bottom: 2em;
      @media (max-width: 1024px) {
        margin-bottom: 1em;
      }
    }
    .blog-columns {
      display: grid;
      gap: 60px;
      grid-template-columns: repeat(2, 1fr);
      align-items: start;
      @media (max-width: 1280px) {
        gap: 40px;
      }
      @media (max-width: 1024px) {
        display: block;
      }
      .blog-featured {
        .featured-article {
          figure {
            position: relative;
            margin-bottom: 20px;
            @media (max-width: 1024px) {
              display: none;
            }
            a {
              display: block;
              img {
                width: 100%;
                border-radius: var(--br-sm);
                z-index: 1;
              }
            }
            .blog-date {
              display: flex;
              flex-direction: column;
              gap: 2px;
              justify-content: center;
              position: absolute;
              width: 70px;
              height: 70px;
              left: 30px;
              top: 30px;
              background-color: var(--c-primary-200);
              border-radius: var(--br-xs);
              span {
                width: 100%;
                text-align: center;
                line-height: 1;
                &.day {
                  font-size: 28px;
                  font-weight: 700;
                }
                &.month {
                  font-size: 14px;
                  font-weight: 300;
                  text-transform: uppercase;
                }
              }
            }
          }
          h3 {
            margin: 0;
            a {
              display: block;
              color: var(--c-white);
              transition: color 0.3s ease;
              @media (max-width: 1024px) {
                padding: 1.6em 0;
                transition: color 0.3s ease, border-color 0.3s ease;
                border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
                &:hover {
                  border-color: var(--c-primary-200);
                }
              }
              &:hover {
                color: var(--c-primary-200);
              }
            }
          }
        }
      }
      .other-blog {
        .blog-list {
          margin-bottom: 3em;
          article {
            h3 {
              margin: 0;
              a {
                display: block;
                padding: 1.6em 0;
                color: var(--c-white);
                transition: color 0.3s ease, border-color 0.3s ease;
                border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
                @media (max-width: 1280px) {
                  padding: 1.2em 0;
                }
                &:hover {
                  color: var(--c-primary-200);
                  border-color: var(--c-primary-200);
                }
              }
            }
          }
        }
        .cta {
          @media (max-width: 1024px) {
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }
}