.article-latest-posts {
  background-color: var(--secondary-gray-20);
  padding: var(--space-40px) 0;

  @media (width >= 1024px) {
    padding: var(--space-80px) 0;
  }

  .article-latest-posts__wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--space-16px);
  }

  .article-latest-posts__heading-container {
    text-align: center;
    margin-bottom: var(--space-40px);

    @media (width >= 1024px) {
      margin-bottom: var(--space-48px);
    }

    .article-latest-posts__heading {
      position: relative;
      display: inline-block;
      font-family: var(--body-font-family);
      font-size: 25px;
      font-weight: var(--fw-700);
      color: var(--secondary-black);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin: 0;
      padding-top: var(--space-20px);

      @media (width >= 1024px) {
        font-size: 40px;
      }

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 3px;
        background-color: var(--primary-red);
        transition: width 0.5s;
      }

      &:hover::before {
        width: 100%;
      }
    }
  }

  .article-latest-posts__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-24px);

    @media (width >= 768px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (width >= 1024px) {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-32px);
    }
  }

  .article-latest-posts__card {
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid var(--primary-black);
    transition: 0.3s ease-in;
    &:hover {
      box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    }
    .article-latest-posts__image-link {
      display: block;
      overflow: hidden;
    }

    .article-latest-posts__picture {
      display: block;
      aspect-ratio: 16 / 9;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        display: block;
        transition: transform 0.4s ease;
      }
    }

    &:hover .article-latest-posts__picture img {
      transform: scale(1.04);
    }

    .article-latest-posts__content {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 40px;
      background-color: var(--tertiary-white);
    }

    .article-latest-posts__title {
      margin: 0 0 var(--space-12px);
      font-family: var(--body-font-family);
      font-size: var(--body-font-size-s);
      font-weight: var(--fw-700);
      line-height: 1.3;
      color: var(--secondary-black);

      @media (width >= 1024px) {
        font-size: var(--body-font-size-m);
      }

      .article-latest-posts__title-link {
        color: inherit;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .article-latest-posts__description {
      margin: 0 0 var(--space-20px);
      font-family: var(--body-font-family);
      font-size: var(--body-font-size-xxs);
      font-weight: var(--fw-400);
      line-height: 1.6;
      color: var(--secondary-main);
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;

      @media (width >= 1024px) {
        font-size: var(--body-font-size-xs);
      }
    }

    .article-latest-posts__cta {
      align-self: flex-start;
      background-color: var(--primary-black);
      color: var(--tertiary-white);
      display: inline-block;
      font-family: var(--body-font-family);
      font-size: var(--body-font-size-xxs);
      font-weight: var(--fw-700);
      letter-spacing: 0.08em;
      margin-top: auto;
      padding: var(--space-12px) var(--space-24px);
      position: relative;
      text-decoration: none;
      text-transform: uppercase;

      &::after {
        background: var(--primary-red);
        bottom: 0;
        content: '';
        height: 3px;
        left: 0;
        position: absolute;
        transition: width 0.3s ease;
        width: 0;
      }

      &:hover::after {
        width: 100%;
      }
    }
  }
}