/* =========================================================
   Blocs de contenu et widgets des pages administrables
   (Contenu → Pages et Contenu → Widgets).

   Complète assets/css/style.css : ce fichier ne porte que ce
   qui est propre aux blocs — bannière des pages, fil d'Ariane,
   grilles (wk-cards / wk-plain), onglets (wk-tabs), lignes
   défilantes (wk-slideset) et listes de liens.
   Couleurs du thème : #47b2e4 (accent) et #37517e (fond foncé).
   ========================================================= */

/* ---------------------------------------------------------
   Bannière des pages de contenu (partial page-hero)
   L'entête du thème est en position fixe : ce bandeau réserve
   la place sous lui, même quand aucune image n'est choisie.
   --------------------------------------------------------- */
.page-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #37517e;
}
.page-hero .carousel,
.page-hero .carousel-inner,
.page-hero .carousel-item {
    height: 100%;
}
.page-hero .carousel-item {
    background-size: cover;
    background-position: center;
}
.page-hero .hero-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 100%;
    padding: 0 15px;
    text-align: center;
}
.page-hero .hero-caption h1 {
    margin: 0;
    color: #fff;
    font-size: 36px;
    font-weight: 700;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
/* L'entête du thème est transparent tant que la page n'est pas défilée : sur
   une bannière, le menu et le logo deviendraient illisibles. Il reprend donc un
   fond dès qu'une page en porte une — le bleu du thème, celui que l'ancien site
   affichait sous son entête, et non le bleu-gris du défilement.
   Navigateur sans :has() — le fond reste transparent : rien n'est cassé. */
body:has(.page-hero) #header {
    background: #37517e;
}

/* Sans image, la bannière est un bandeau clair à titre foncé, comme le titre de
   section de l'ancien site. Sa hauteur ne se règle pas : elle suit son contenu,
   avec de quoi passer sous l'entête, qui est en position fixe. Le réglage de
   hauteur ne vaut donc que pour le diaporama. */
.page-hero.page-hero-vide {
    height: auto !important;
    background: #f3f5fa;
    padding: 125px 0 35px;
}
.page-hero.page-hero-vide .hero-caption {
    position: static;
    transform: none;
}
.page-hero.page-hero-vide .hero-caption h1 {
    color: #37517e;
    text-shadow: none;
}

/* Avec une image, le titre reste blanc, mais descend un peu : centré sur un
   bandeau court, il passerait sous l'entête. */
.page-hero:not(.page-hero-vide) .hero-caption {
    margin-top: 35px;
}
@media (max-width: 767px) {
    .page-hero .hero-caption h1 {
        font-size: 26px;
    }
}

/* ---------------------------------------------------------
   Fil d'Ariane (partial breadcrumb)
   --------------------------------------------------------- */
.page-breadcrumb {
    background: #fff;
    border-bottom: 1px solid #e6e9f0;
    padding: 14px 0;
    font-size: 14px;
}
.page-breadcrumb .breadcrumb {
    margin: 0;
    background: none;
    padding: 0;
}
.page-breadcrumb .breadcrumb a {
    color: #47b2e4;
}
.page-breadcrumb .breadcrumb a:hover {
    color: #37517e;
}
.page-breadcrumb .breadcrumb-item.active {
    color: #37517e;
}

/* ---------------------------------------------------------
   Page de contenu
   --------------------------------------------------------- */
/* Le contenu repose sur le même gris clair que le bandeau : les deux ne font
   qu'un aplat, du bandeau au pied de page — lequel garde ses propres fonds. */
.page-contenu {
    background: #f3f5fa;
    padding: 40px 0 60px;
}
.page-contenu.page-contenu-blanc {
    background: #fff;
}
.page-contenu .lead {
    color: #37517e;
    font-size: 18px;
    font-weight: 500;
}
.page-contenu-texte img {
    max-width: 100%;
    height: auto;
}
.page-contenu iframe,
.bloc iframe {
    max-width: 100%;
}
.page-contenu table {
    width: 100%;
    margin-bottom: 1.5rem;
}
.page-contenu table td,
.page-contenu table th {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e6e9f0;
}

/* L'accueil commence par son bandeau : pas d'espace au-dessus */
.page-contenu-accueil {
    padding-top: 0;
}

/* ---------------------------------------------------------
   Blocs (partial blocs.htm)
   --------------------------------------------------------- */
.bloc {
    margin: 2rem 0;
}
.bloc:first-child {
    margin-top: 0;
}
/* Le titre de section du thème porte déjà ses marges */
.bloc-titre {
    margin-bottom: 1.5rem;
}

/* Bloc Bandeau d'accueil : le style vient de #hero (style.css) ; ces règles
   ne font que l'adapter à une hauteur variable — le bandeau du template est
   figé à 80vh, ce qui tronquerait un texte un peu long */
#hero.bloc-hero {
    height: auto;
    min-height: 80vh;
    padding-bottom: 40px;
    margin: 0;
}
#hero.bloc-hero .bloc-hero-texte {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 20px;
}
#hero.bloc-hero .bloc-hero-texte a {
    color: #47b2e4;
}

/* Bloc Grille de cartes, style « encadrés à icône » : le bouton descend au bas
   de la carte, pour que les boutons s'alignent quelle que soit la longueur des
   textes. Les colonnes étant déjà étirées (align-items-stretch), il suffit que
   l'encadré se répartisse en colonne. */
.bloc-cartes-services .icon-box {
    display: flex;
    flex-direction: column;
}
.bloc-cartes-services .icon-box .bloc-carte-bouton {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 15px;
}

/* Bloc Accordéon avec image de côté : reprend la section « Nos prestations »
   de l'accueil — l'image occupe toute la hauteur de la colonne */
.bloc-accordeon-titre {
    font-weight: 700;
    color: #37517e;
}
.bloc-accordeon-image {
    background-size: cover;
    background-position: center center;
    min-height: 320px;
}

/* Bloc Image + texte : le texte habille l'image */
.bloc-image-texte .bloc-image-gauche {
    float: left;
    margin: 0 1.5rem 1rem 0;
    max-width: 45%;
}
.bloc-image-texte .bloc-image-droite {
    float: right;
    margin: 0 0 1rem 1.5rem;
    max-width: 45%;
}
@media (max-width: 575px) {
    .bloc-image-texte .bloc-image-gauche,
    .bloc-image-texte .bloc-image-droite {
        float: none;
        margin: 0 0 1rem;
        max-width: 100%;
    }
}

/* Bloc Boutons : rangée de boutons espacés */
.bloc-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.bloc-boutons.text-center {
    justify-content: center;
}
.bloc-boutons .btn-primary,
.bloc .btn-primary,
.page-form .btn-primary {
    background: #47b2e4;
    border-color: #47b2e4;
    border-radius: 50px;
    padding: 8px 26px;
    font-weight: 500;
}
.bloc-boutons .btn-primary:hover,
.bloc .btn-primary:hover,
.page-form .btn-primary:hover {
    background: #209dd8;
    border-color: #209dd8;
}

/* Bloc Grille de cartes, style « encadrés à icône » : le style du thème
   vise .services .icon-box, d'où le conteneur .services du partial */
.bloc-cartes-services .icon-box {
    width: 100%;
}
.bloc-cartes-services .icon-box img {
    margin-top: 1rem;
}

/* Bloc Accordéon : le thème ne stylise l'accordéon que dans #why-us,
   ces règles le rendent utilisable partout */
.bloc-accordeon ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Chaque élément est un encadré blanc, comme dans la section « Nos
   prestations » de l'accueil (.why-us .accordion-list du thème) */
.bloc-accordeon li {
    padding: 20px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 5px 20px 0 rgba(68, 88, 144, 0.08);
}
.bloc-accordeon li + li {
    margin-top: 15px;
}
.bloc-accordeon a {
    display: block;
    position: relative;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    padding: 0 30px 0 0;
    outline: none;
    cursor: pointer;
    color: #37517e;
    text-decoration: none;
}
.bloc-accordeon a.collapsed {
    color: #343a40;
}
.bloc-accordeon a:hover,
.bloc-accordeon a:not(.collapsed) {
    color: #47b2e4;
}
.bloc-accordeon .icon-show,
.bloc-accordeon .icon-close {
    font-size: 24px;
    position: absolute;
    right: 0;
    top: 0;
}
/* Chevron vers le bas quand l'élément est replié, vers le haut quand il est
   ouvert — le thème pose la même règle sous #why-us */
.bloc-accordeon .icon-show {
    display: none;
}
.bloc-accordeon a.collapsed .icon-show {
    display: inline-block;
}
.bloc-accordeon a.collapsed .icon-close {
    display: none;
}
.bloc-accordeon .collapse {
    padding: 10px 0 0 0;
}

/* Bloc Galerie : les vignettes du thème (.portfolio) attendent une hauteur
   régulière, sans quoi la grille se décale d'une ligne à l'autre */
.bloc-galerie .portfolio-item {
    /* Le cadre d'information du thème est en position absolue, mais aucune
       règle ne pose de position sur la vignette : le thème comptait sur
       Isotope, qui positionne lui-même les éléments et lui offrait ainsi son
       point d'ancrage. La galerie n'emploie pas Isotope — il positionne en
       absolu, ce qui ne convient qu'à une grille filtrée — c'est donc à la
       vignette de porter la position. Sans elle, le cadre s'ancre sur la page
       et se pose hors champ : l'image grossit au survol, mais le texte et les
       boutons n'apparaissent jamais. */
    position: relative;
    margin-bottom: 30px;
}
.bloc-galerie .portfolio-img img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
/* Les deux boutons du thème sont posés en absolu à droite du cadre : le titre
   et la description doivent leur laisser la place, sinon le texte leur passe
   dessous. */
.bloc-galerie .portfolio-info h4,
.bloc-galerie .portfolio-info p {
    padding-right: 72px;
}

/* Bloc Personnes : cartes de même hauteur */
.bloc-personnes .member {
    width: 100%;
    margin-bottom: 30px;
}
.bloc-personnes .member .pic img {
    width: 100%;
    height: auto;
}

/* Bloc Contact : le style des encadrés vient de .contact .info (style.css) ;
   ces règles n'ajoutent que la carte et le calcul d'itinéraire */
.bloc-contact .bloc-contact-note {
    margin-top: 1rem;
    font-size: 14px;
    color: #6182ba;
}
.bloc-contact .info .social-links {
    margin-bottom: 20px;
}
.bloc-contact .bloc-contact-carte iframe,
.bloc-contact .bloc-contact-carte embed,
.bloc-contact .bloc-contact-carte object {
    width: 100%;
    min-height: 320px;
    border: 0;
}
.bloc-contact .bloc-contact-itineraire {
    margin-top: 20px;
}
.bloc-contact .bloc-contact-itineraire-champs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.bloc-contact .bloc-contact-itineraire-champs input {
    flex: 1 1 180px;
}
.bloc-contact .bloc-contact-itineraire-erreur {
    margin: 0.5rem 0 0;
    font-size: 14px;
    color: #d9534f;
}

/* ---------------------------------------------------------
   Blog : liste d'articles (partial blog-cartes) et article
   --------------------------------------------------------- */
.blog-liste .blog-carte {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
    transition: 0.3s;
}
.blog-liste .blog-carte:hover {
    box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.2);
}
.blog-liste .blog-carte-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.blog-liste .blog-carte-corps {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px;
}
.blog-liste .blog-carte-date {
    margin-bottom: 6px;
    color: #6182ba;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.blog-liste .blog-carte h4 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
}
.blog-liste .blog-carte h4 a {
    color: #37517e;
    text-decoration: none;
}
.blog-liste .blog-carte h4 a:hover {
    color: #47b2e4;
}
.blog-liste .blog-carte-resume {
    flex: 1 1 auto;
    font-size: 15px;
}
/* Le bouton reste en bas de la carte, quelle que soit la longueur du résumé */
.blog-liste .blog-carte .icon-plus {
    align-self: flex-start;
    margin-top: 14px;
}
.blog-pagination {
    margin-top: 20px;
}
.blog-pagination .page-item.active .page-link {
    background: #47b2e4;
    border-color: #47b2e4;
}
.blog-pagination .page-link {
    color: #37517e;
}
.article .article-date {
    color: #6182ba;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.article .article-image {
    margin: 30px 0;
}
.article .article-image img {
    max-width: 100%;
    height: auto;
}
.article .article-retour {
    margin-top: 30px;
}

/* =========================================================
   Widgets et grilles (classes wk-*)
   Partagées par le bloc « Grille de cartes » et par les widgets
   réutilisables (Contenu → Widgets).
   ========================================================= */

/* Liste de liens */
ul.widgetkit {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem 1.5rem;
    margin: 1.5rem 0;
    padding: 0;
}
ul.widgetkit li {
    margin: 0;
}
ul.widgetkit li a {
    display: block;
    padding: 0.65rem 1.25rem;
    background: #f3f5fa;
    border-left: 3px solid #47b2e4;
    border-radius: 0 4px 4px 0;
    color: #37517e;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
ul.widgetkit li a:hover {
    background: #47b2e4;
    color: #fff;
}

/* Grilles */
div.widgetkit {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.75rem;
    margin: 2rem 0;
}
div.widgetkit .wk-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
/* Style « carte » : fond blanc et ombre, comme les encadrés du thème */
div.widgetkit:not(.wk-plain) .wk-item {
    background: #fff;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
    transition: 0.3s;
}
div.widgetkit:not(.wk-plain) .wk-item:hover {
    box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.2);
}
/* Option « panel: hover » : la carte n'apparaît qu'au survol */
div.widgetkit.wk-panel-hover .wk-item {
    border-radius: 12px;
    padding: 2rem 1.5rem;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}
div.widgetkit.wk-panel-hover .wk-item:hover {
    background: #fff;
    box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.2);
}
@media (min-width: 992px) {
    div.widgetkit.wk-cols-2 { grid-template-columns: repeat(2, 1fr); }
    div.widgetkit.wk-cols-3 { grid-template-columns: repeat(3, 1fr); }
    div.widgetkit.wk-cols-4 { grid-template-columns: repeat(4, 1fr); }
    div.widgetkit.wk-cols-5 { grid-template-columns: repeat(5, 1fr); }
    div.widgetkit.wk-cols-6 { grid-template-columns: repeat(6, 1fr); }
}
div.widgetkit .wk-item img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    margin: 0;
}
div.widgetkit .wk-item .wk-icon i {
    font-size: 40px;
    color: #47b2e4;
    line-height: 1;
}
div.widgetkit .wk-item h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
div.widgetkit .wk-item h4 a {
    color: #37517e;
    text-decoration: none;
}
div.widgetkit .wk-item h4 a:hover {
    color: #47b2e4;
}
div.widgetkit .wk-subtitle {
    color: #37517e;
    font-weight: 600;
}
div.widgetkit .wk-content {
    font-size: 15px;
    width: 100%;
}
div.widgetkit .wk-content p:last-child {
    margin-bottom: 0;
}
div.widgetkit .wk-content iframe,
div.widgetkit .wk-content video {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}
div.widgetkit.wk-plain .wk-content {
    color: #6c757d;
}
div.widgetkit.wk-plain .wk-item img {
    max-height: 420px;
}
/* Bouton « + » des éléments */
div.widgetkit .icon-plus {
    display: inline-block;
    padding: 6px 20px;
    border: 2px solid #47b2e4;
    border-radius: 50px;
    color: #47b2e4;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
}
div.widgetkit .icon-plus:hover {
    background: #47b2e4;
    color: #fff;
}
/* Image cliquable : éclaircie et flèche au survol */
.wk-media-link {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}
.wk-media-link.wk-media-overlay::after {
    content: '\2192';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.wk-media-link.wk-media-overlay:hover::after {
    opacity: 1;
}
.wk-media-link.wk-media-overlay img {
    transition: opacity 0.2s ease;
}
.wk-media-link.wk-media-overlay:hover img {
    opacity: 0.55;
}
/* Forme des images */
div.widgetkit.wk-media-circle .wk-item img,
.wk-tabs.wk-media-circle .wk-pane img {
    border-radius: 50%;
}
div.widgetkit.wk-media-rounded .wk-item img,
.wk-tabs.wk-media-rounded .wk-pane img {
    border-radius: 14px;
}
/* Widget à élément unique : pleine largeur */
div.widgetkit .wk-item:only-child {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------
   Lignes défilantes (slidesets)
   --------------------------------------------------------- */
div.widgetkit.wk-slideset {
    display: block;
}
div.widgetkit.wk-slideset .wk-slidenav {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
div.widgetkit.wk-slideset .wk-slidenav button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #47b2e4;
    background: transparent;
    color: #47b2e4;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
div.widgetkit.wk-slideset .wk-slidenav button:hover {
    background: #47b2e4;
    color: #fff;
}
div.widgetkit.wk-slideset .wk-slides {
    display: flex;
    gap: 1.75rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
div.widgetkit.wk-slideset .wk-slides::-webkit-scrollbar {
    display: none;
}
/* Rangée centrée quand les éléments ne remplissent pas la largeur
   (classe posée en JS — un centrage permanent casserait le défilement) */
div.widgetkit.wk-slideset .wk-slides.wk-centered {
    justify-content: center;
}
div.widgetkit.wk-slideset .wk-slides .wk-item {
    flex: 0 0 100%;
}
@media (min-width: 768px) {
    div.widgetkit.wk-slideset.wk-cols-2 .wk-slides .wk-item { flex-basis: calc(50% - 0.875rem); }
    div.widgetkit.wk-slideset.wk-cols-3 .wk-slides .wk-item { flex-basis: calc(33.333% - 1.167rem); }
    div.widgetkit.wk-slideset.wk-cols-4 .wk-slides .wk-item { flex-basis: calc(25% - 1.313rem); }
    div.widgetkit.wk-slideset.wk-cols-5 .wk-slides .wk-item { flex-basis: calc(20% - 1.4rem); }
    div.widgetkit.wk-slideset.wk-cols-6 .wk-slides .wk-item { flex-basis: calc(16.666% - 1.459rem); }
}
/* Navigation par étiquettes : plus de défilement horizontal — les éléments
   passent à la ligne et le filtre les masque */
div.widgetkit.wk-slideset.wk-filter .wk-slides {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
}
div.widgetkit.wk-slideset.wk-filter .wk-slides .wk-item {
    align-items: stretch;
}
.wk-filternav li a {
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   Onglets (bloc « Onglets » et widgets « Onglets »)
   --------------------------------------------------------- */
div.widgetkit.wk-tabs {
    display: block;
}
.wk-tabnav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    border-bottom: 1px solid #e6e9f0;
}
.wk-tabnav li a {
    display: block;
    padding: 0.6rem 0.75rem;
    margin-bottom: -1px;
    color: #37517e;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}
.wk-tabnav li.wk-active a {
    color: #47b2e4;
    border-bottom-color: #47b2e4;
}
.wk-tabnav li:not(.wk-active) a:hover {
    background: #f3f5fa;
    border-radius: 4px 4px 0 0;
}
.wk-tabnav.wk-tabnav-center {
    justify-content: center;
}
.wk-tabs .wk-pane {
    display: none;
    padding-top: 1.75rem;
}
.wk-tabs .wk-pane.wk-active {
    display: block;
}
.wk-tabs .wk-pane table {
    width: 100%;
}
/* Onglets en colonne à gauche ; sur petit écran, retour à la barre
   horizontale standard */
@media (min-width: 768px) {
    div.wk-tabs.wk-tabs-vertical {
        display: grid;
        grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
        column-gap: 2.5rem;
        align-items: start;
    }
    .wk-tabs.wk-tabs-vertical > .wk-tabnav {
        display: block;
        border-bottom: 0;
        border-right: 1px solid #e6e9f0;
        margin: 1.5rem 0 0;
    }
    .wk-tabs.wk-tabs-vertical > .wk-tabnav li a {
        border-bottom: 0;
        border-right: 3px solid transparent;
        margin: 0 -1px 0 0;
        padding: 0.55rem 1.25rem 0.55rem 0;
        line-height: 1.5;
    }
    .wk-tabs.wk-tabs-vertical > .wk-tabnav li.wk-active a {
        border-right-color: #47b2e4;
    }
    .wk-tabs.wk-tabs-vertical > .wk-pane {
        grid-column: 2;
        grid-row: 1;
        padding-top: 1.75rem;
    }
    /* Image à gauche du contenu : seul le panneau ACTIF passe en grille,
       sans quoi cette règle écraserait le display:none des autres */
    .wk-pane.wk-pane-media-left.wk-active {
        display: grid;
        grid-template-columns: minmax(140px, 260px) minmax(0, 1fr);
        column-gap: 2.5rem;
        align-items: start;
    }
    .wk-pane.wk-pane-media-left > img {
        width: 100%;
        height: auto;
        margin-top: 1rem;
    }
}