.blog-articles {
  display: grid;
  grid-gap: 1rem;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

.blog-articles .card-wrapper {
  width: 100%;
}

@media screen and (min-width: 750px) {
  .blog-articles {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }

  .blog-articles--collage > *:nth-child(3n + 1),
  .blog-articles--collage > *:nth-child(3n + 2):last-child {
    grid-column: span 2;
    text-align: center;
  }

  .blog-articles--collage > *:nth-child(3n + 1) .card,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .card {
    text-align: center;
  }

  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--small .ratio::before,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--small .ratio::before {
    padding-bottom: 22rem;
  }

  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--medium .ratio::before,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--medium .ratio::before {
    padding-bottom: 44rem;
  }

  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--large .ratio::before,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--large .ratio::before {
    padding-bottom: 66rem;
  }
}

@media screen and (min-width: 990px) {
  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--small .ratio .ratio::before,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--small .ratio .ratio::before {
    padding-bottom: 27.5rem;
  }

  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--medium .ratio::before,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--medium .ratio::before {
    padding-bottom: 55rem;
  }

  .blog-articles--collage > *:nth-child(3n + 1) .article-card__image--large .ratio::before,
  .blog-articles--collage > *:nth-child(3n + 2):last-child .article-card__image--large .ratio::before {
    padding-bottom: 82.5rem;
  }
}

/* kernix styles */
.section-blog { overflow: hidden; }
.main-blog {
    position: relative;
    &::before {
        content: ''; position: absolute; left: -999em; top: 0; right: -999em; height: 50vh; background: var(--rel-bg-light);
        @media (max-width: 767px){ height: 60vh; }
    }

    .cg_ariane_string { position: relative; z-index: 2; margin: 0; padding-top: 20px; color: var(--rel-green);
        font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 400; line-height: 28px;
        > p {
            margin: 0;
            > a { color: var(--rel-green); text-decoration: none; font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 400; line-height: 28px; }
        }
        .metafield-single_line_text_field {
            color:  var(--rel-green); font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 400; line-height: 28px;
            &:last-child { color: var(--rel-green-60); }
        }
    }

    .page-heading {
        position: relative; z-index: 3;
    }

    /* Barre de recherche du journal */
    .blog-search {
        position: relative; z-index: 3;
        max-width: 420px; margin: 10px auto 60px;

        .field { width: 100%; }
        .search__input.field__input { width: 100%; }
    }

    /* Article list wrapper */
    .blog-articles {
        display: flex; flex-wrap: wrap; position: relative; z-index: 2; justify-content: space-between;

        /* article wrapper */
        .blog-articles__article {
            width: calc(50% - (105px / 2));
            @media (max-width: 767px){ width: 100%; margin-bottom: 20px; }

            &:nth-child(odd){
                @media (min-width: 768px){ transform: translateY(90px); }
            }

            &:first-child {
                width: 100%; transform: none!important; height: auto;
                @media (min-width: 768px){ margin-bottom: 100px; }

                .card-wrapper {
                    height: auto;
                    .card.article-card {
                        height: auto;

                        @media (min-width: 1024px){ margin-right: 200px; }
                        @media (min-width: 1180px){ margin-right: 200px; }
                        .card__inner {
                            @media (min-width: 768px){ padding-bottom: 56%; }
                        }
                        .card__content {
                            padding: 20px; transform: none!important; margin-left: 0;
                            @media (min-width: 1024px){ position: absolute; bottom: 0; left: 30%; right: 0; padding: 60px 0 60px 60px; transform: none; }
                            @media (min-width: 1024px){ left: 50%; }

                            @media (min-width: 1024px){
                                &::before { content: ''; position: absolute; left: 100%; top: 0; bottom: 0; width: 100vw; background: var(--rel-bg-light); }
                            }

                            .card__information {
                                .card__heading {
                                    margin-bottom: 16px;

                                    .full-unstyled-link {
                                        font-size: 25px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
                                        @media (min-width: 768px){ font-family: "Playfair Display"; font-size: 34px; font-style: normal; font-weight: 400; line-height: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
                                    }
                                }
                                .article-card__info {
                                    .circle-divider {
                                        > time {
                                            @media (min-width: 768px){ margin-bottom: 8px; }
                                        }
                                    }
                                }
                                .article-card__excerpt { display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-style: normal; font-weight: 400; line-height: 25px; margin-bottom: 20px; }
                            }
                        }
                    }
                }
            }

            .card-wrapper {
                position: relative;

                .card.article-card {
                    position: static; height: auto;

                    &:hover>.card__content .card__information { opacity: 1!important; }

                    /* image wrapper */
                    .card__inner {
                        position: relative; padding-bottom: 63%;
                        @media (max-width: 767px){padding-bottom: 55%; }

                        &::before, &::after { display: none;}

                        .article-card__image-wrapper.card__media { position: absolute; left: 0; top: 0; bottom: 0; right: 0; border-radius: 0;
                            .article-card__image { position: absolute; left: 0; top: 0; bottom: 0; right: 0; overflow: hidden;
                                > img { position: absolute; left: 0; top: 0; bottom: 0; right: 0; object-fit: cover; height: 100%; width: 100%; }
                            }
                        }

                        /* Tags */
                        .tags-wrapper {
                             position: absolute; left: 16px; top: 16px;
                            .article-tag { display: inline-block; padding:4px 8px; color: white; font-size: 12px; font-style: normal; font-weight: 500; line-height: 14px; letter-spacing: 0.36px; text-transform: uppercase; margin-right: 10px; background-color: var(--rel-orange-80); }
                        }

                        /* in case of useless duplicate content */
                        .card__content { display: none; }
                    }
                    /* Article card content */
                    .card__content {
                        background: var(--rel-bg-light); padding: 32px; transform: translateY(-50%); margin-left: 100px; width: auto; text-align: left;
                        @media (max-width: 1023px){ margin-left: 0; padding: 20px 0; transform: none; }

                        .card__information {
                            text-align: left; padding: 0; display: block; opacity: 1!important;
                            /* title */
                            .card__heading {
                                display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;
                                .full-unstyled-link {
                                    font-family: "Playfair Display"; color: var(--rel-green); font-size: 24px; font-style: normal; font-weight: 400; line-height: normal; text-decoration: none; letter-spacing: 0;
                                    @media (max-width:767px){ font-size: 20px; }
                                    /* overlay to make all the block clickable */
                                    &::after { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; }

                                    &:hover { text-decoration: none; }
                                }
                            }
                            /* date */
                            .article-card__info {
                                .circle-divider {
                                    > time { display: inline-block; margin-bottom: 4px; color: var(--rel-orange-80); font-family: Montserrat; font-size: 14px; font-style: normal; font-weight: 500; line-height: 25px; /* 178.571% */ letter-spacing: 0.84px; text-transform: uppercase; }
                                }
                            }
                            /* excerpt - visible pour donner un aperçu du contenu avant de cliquer */
                            .article-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-style: normal; font-weight: 400; line-height: 22px; color: var(--rel-body-color); margin: 8px 0 16px; }

                            /* footer (comments)*/
                            .article-card__footer { display: none; }

                            /* actions (see article) */
                            .actions {
                                text-align: left; margin-top: 20px;

                                .btn-link { color: var(--rel-green); font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 0.42px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
                            }
                        }
                    }
                }
            }
        }
    }
}