.c_blogs {
  overflow: visible;
  position: relative;
  margin-bottom: 100px;

  .h_title {
    margin-bottom: 2.1875rem;
    margin-top: 2.1875rem;

    .alert-heading {
      font-size: 2.813rem;
      font-weight: 300;
    }
  }

  .blog-list {
    .field__items {
      .field__item {
        .c_blog {
          display: grid;
          grid-template-columns: 50% 50%;
          background-color: var(--color-white);
          border-radius: 4px;
          box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
          margin: 2rem 0;

          @media screen and (max-width: 985px) {
            display: flex;
            flex-direction: column;
            max-width: unset;
          }

          .blog-image {
            flex: 1;
            max-height: 100%;
            /* max-width: 429px; */

            @media screen and (max-width: 985px) {
              max-width: unset;
            }

            img {
              height: fit-content;
              object-fit: cover;
              width: 100%;
            }
          }

          .blog-content {
            flex: 1;
            border-top: 0;
            padding: 32px;
            gap: 7px;
            height: auto;
            position: relative;

            /* 📱 Tablet/Móvil: menos padding */
            @media screen and (max-width: 1024px) {
              padding: 32px;
            }

            .blog-content-overline-date {
              display: flex;
              justify-content: space-between;
            }

            .blog-content-overline,
            .blog-content-overline-date {
              color: var(--color-gray-dark);
              font-size: 0.8rem;
              font-weight: 700;
              letter-spacing: 1px;
              line-height: 16px;
              text-transform: uppercase;
              margin-bottom: 8px;
              margin-top: 0;
            }

            .blog-content-overline {
              margin-bottom: 0;
            }

            /* Título */
            .blog-title {
              margin: 0 0 16px 0;

              /* 📱 Tablet/Móvil: añadir espacio inferior */
              @media screen and (max-width: 985px) {
                margin: 0 0 1rem 0;
              }

              .alert-heading {
                font-weight: 300;
                letter-spacing: 0;
                margin: 0;
                font-size: 1.875rem;
                text-align: left;
                line-height: 42px;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;

                /* 📱 Tablet/Móvil: normalizar interlineado */
                @media screen and (max-width: 1024px) {
                  line-height: unset;
                  max-width: none;
                }
              }
            }

            /* Descripción */
            .blog-description {
              margin: 0 0 1.125rem 0;
              padding: 0;

             /* 📱 Móvil */
              @media screen and (max-width: 1024px) {
                /* padding-bottom: 3rem; */
                margin: 0 0 18px 0;
                box-shadow: unset;
              }

              p {
                text-align: start;
                font-weight: 300;
                letter-spacing: 0;
                margin: 0;
                font-size: 1rem;
              }
            }

            /* Enlace / CTA */
            .blog-link-container {
              display: flex;
              justify-content: space-between;
              margin-top: 40px;

              /* 📱 Móvil */
              @media screen and (max-width: 985px) {
                padding: 0;
                margin-top: 8px;
              }

              .blog-link {
                display: flex;
                align-items: center;
                color: var(--color-red) !important;

                span {
                  font-size: 1rem;
                  border-radius: 4px;
                  font-weight: 700;
                  gap: 8px;
                  text-transform: uppercase;
                }

                a {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius: 4px;
                  font-weight: 700;
                  font-size: 1rem;
                  gap: 8px;
                  letter-spacing: 1px;
                  text-align: center;
                  text-transform: uppercase;
                  color: var(--color-red) !important;
                  text-decoration: none;
                }
              }
            }

            .blog-link-share {
              cursor: pointer;
              .icon-share::before {
                font-size: 1.5rem;
              }
            }
          }
        }
      }
    }
  }
}

/* 📱 Tablet/Móvil: estructura en columna */
@media (max-width: 1024px) {
  .c_blogs {
    .blog-list {
      .field__item {
        .c_blog {
          flex-direction: column;
          width: 100%;
          max-width: 100%;
          box-sizing: border-box;

          .blog-image,
          .blog-content {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
          }

          .blog-content {
            padding: 24px;

            .h_title {
              .alert-heading {
                text-wrap: auto !important;
              }
            }
          }
        }
      }
    }
  }
}