/* Version: 23-09-2026-20-19 */
/* Version: 02-09-2026-22-45 — mobile : gauche/droite → dessus/dessous */
.hero-layout,
.feature-layout {
    width: 100%;
}

.hero-layout #title-home,
.feature-layout #title-feature {
    display: grid;
    width: 100%;
    align-items: stretch;
    box-sizing: border-box;
    position: relative;
}

/* Espacement vertical uniforme (haut = bas) — au niveau section pour fond pleine largeur */
#portfolio_page #hero.hero-layout:not(.hero-layout--image-behind),
section.home-feature-vedette.feature-layout:not(.feature-layout--image-behind) {
    padding-top: var(--hero-padding-block, 45px) !important;
    padding-bottom: var(--hero-padding-block, 45px) !important;
}

section.home-feature-vedette.feature-layout:not(.feature-layout--image-behind) {
    padding-top: var(--feature-padding-block, var(--hero-padding-block, 45px)) !important;
    padding-bottom: var(--feature-padding-block, var(--hero-padding-block, 45px)) !important;
}

.hero-layout:not(.hero-layout--image-behind) #title-home,
.feature-layout:not(.feature-layout--image-behind) #title-feature {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.hero-layout #title-home #home-about,
.feature-layout #title-feature #feature-about {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

/* Image en fond : le padding vertical reste sur le bloc texte */
.hero-layout--image-behind #title-home #home-about,
.feature-layout--image-behind #title-feature #feature-about {
    padding-top: var(--hero-padding-block, 45px) !important;
    padding-bottom: var(--hero-padding-block, 45px) !important;
}

.feature-layout--image-behind #title-feature #feature-about {
    padding-top: var(--feature-padding-block, var(--hero-padding-block, 45px)) !important;
    padding-bottom: var(--feature-padding-block, var(--hero-padding-block, 45px)) !important;
}

.hero-layout:not(.hero-layout--image-behind) #title-home #home-about,
.feature-layout:not(.feature-layout--image-behind) #title-feature #feature-about {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline: 0;
    margin-inline: 0;
    width: 100%;
    max-width: 100%;
}

/* Largeur du contenu — pilotée par hero-layout--content-full|limited (pas .pf-w-wide utilitaire) */
/* Pas de padding-inline ici : la section (#hero / .home-feature-vedette) porte déjà .pf-pad-x-md (20px) — sinon le contenu se retrouve avec 40px de marge latérale au lieu de 20px */
/* « Pleine largeur » reste plafonnée à --layout-width-wide (1500px, comme #footer-main et le reste du site) — pas de max-width: none */
.hero-layout--content-full:not(.hero-layout--image-behind) #title-home,
.feature-layout--content-full:not(.feature-layout--image-behind) #title-feature,
#portfolio_page #hero.hero-layout--content-full:not(.hero-layout--image-behind) #title-home,
#portfolio_page section.home-feature-vedette.feature-layout--content-full:not(.feature-layout--image-behind) #title-feature {
    max-width: var(--layout-width-wide, 1500px);
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

.hero-layout--content-limited:not(.hero-layout--image-behind) #title-home,
.feature-layout--content-limited:not(.feature-layout--image-behind) #title-feature,
#portfolio_page #hero.hero-layout--content-limited:not(.hero-layout--image-behind) #title-home,
#portfolio_page section.home-feature-vedette.feature-layout--content-limited:not(.feature-layout--image-behind) #title-feature {
    max-width: var(--layout-width-content, 1000px);
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

/* Annule .pf-w-wide / .pf-w-content globaux si encore présents sur le conteneur grid */
.hero-layout--content-full:not(.hero-layout--image-behind) #title-home:is(.pf-w-wide, .pf-w-content),
.feature-layout--content-full:not(.feature-layout--image-behind) #title-feature:is(.pf-w-wide, .pf-w-content),
#portfolio_page #hero.hero-layout--content-full:not(.hero-layout--image-behind) #title-home:is(.pf-w-wide, .pf-w-content),
#portfolio_page section.home-feature-vedette.feature-layout--content-full:not(.feature-layout--image-behind) #title-feature:is(.pf-w-wide, .pf-w-content) {
    max-width: var(--layout-width-wide, 1500px);
    margin-inline: auto;
}

.hero-layout--content-limited:not(.hero-layout--image-behind) #title-home:is(.pf-w-wide, .pf-w-content),
.feature-layout--content-limited:not(.feature-layout--image-behind) #title-feature:is(.pf-w-wide, .pf-w-content),
#portfolio_page #hero.hero-layout--content-limited:not(.hero-layout--image-behind) #title-home:is(.pf-w-wide, .pf-w-content),
#portfolio_page section.home-feature-vedette.feature-layout--content-limited:not(.feature-layout--image-behind) #title-feature:is(.pf-w-wide, .pf-w-content) {
    max-width: var(--layout-width-content, 1000px);
    margin-inline: auto;
}

.hero-layout:not(.hero-layout--image-behind) #title-home #home-about,
.feature-layout:not(.feature-layout--image-behind) #title-feature #feature-about {
    max-width: 100%;
    margin-inline: 0;
}

/* Image derrière : largeur du bloc texte selon content-full|limited (« pleine largeur » plafonnée à --layout-width-wide, comme ailleurs) */
.hero-layout--content-full.hero-layout--image-behind #title-home #home-about,
.feature-layout--content-full.feature-layout--image-behind #title-feature #feature-about,
#portfolio_page #hero.hero-layout--content-full.hero-layout--image-behind #title-home #home-about,
#portfolio_page section.home-feature-vedette.feature-layout--content-full.feature-layout--image-behind #title-feature #feature-about {
    max-width: var(--layout-width-wide, 1500px);
    width: 100%;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
}

.hero-layout--content-limited.hero-layout--image-behind #title-home #home-about,
.feature-layout--content-limited.feature-layout--image-behind #title-feature #feature-about,
#portfolio_page #hero.hero-layout--content-limited.hero-layout--image-behind #title-home #home-about,
#portfolio_page section.home-feature-vedette.feature-layout--content-limited.feature-layout--image-behind #title-feature #feature-about {
    max-width: var(--layout-width-content, 1000px);
    width: 100%;
    margin-inline: auto;
    padding-inline: 20px;
    box-sizing: border-box;
}

.hero-layout--content-full.hero-layout--image-behind #title-home #home-about:is(.pf-w-wide, .pf-w-content),
.feature-layout--content-full.feature-layout--image-behind #title-feature #feature-about:is(.pf-w-wide, .pf-w-content) {
    max-width: var(--layout-width-wide, 1500px);
    margin-inline: auto;
}

.hero-layout--content-limited.hero-layout--image-behind #title-home #home-about:is(.pf-w-wide, .pf-w-content),
.feature-layout--content-limited.feature-layout--image-behind #title-feature #feature-about:is(.pf-w-wide, .pf-w-content) {
    max-width: var(--layout-width-content, 1000px);
    margin-inline: auto;
}

#portfolio_page #hero.hero-layout #title-home,
#portfolio_page section.home-feature-vedette.feature-layout #title-feature {
    display: grid !important;
    column-gap: var(--hero-content-gap, 48px);
    row-gap: var(--hero-content-gap, 48px);
}

#portfolio_page section.home-feature-vedette.feature-layout #title-feature {
    column-gap: var(--feature-content-gap, var(--hero-content-gap, 48px));
    row-gap: var(--feature-content-gap, var(--hero-content-gap, 48px));
}

.hero-layout--image-behind,
.feature-layout--image-behind {
    padding-inline: 0 !important;
}

/* Image derrière : conteneur titre pleine largeur (annule .pf-w-wide utilitaire 1500px) */
/* Pas de padding-inline ici : #home-about / #feature-about porte déjà le padding-inline (20px) du bloc texte — sinon le texte se retrouve avec 40px de marge latérale au lieu de 20px */
.hero-layout--image-behind #title-home,
.hero-layout--image-behind #title-home.pf-w-content,
.hero-layout--image-behind #title-home.pf-w-wide,
#portfolio_page #hero.hero-layout--image-behind #title-home,
.feature-layout--image-behind #title-feature,
.feature-layout--image-behind #title-feature.pf-w-content,
.feature-layout--image-behind #title-feature.pf-w-wide,
#portfolio_page section.home-feature-vedette.feature-layout--image-behind #title-feature {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
    box-sizing: border-box;
}

.hero-layout--image-behind #home-present,
.feature-layout--image-behind #feature-present {
    display: none !important;
}

#portfolio_page #hero.hero-layout,
#portfolio_page section.home-feature-vedette.feature-layout {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
}

.hero-layout--image-behind #title-home,
.feature-layout--image-behind #title-feature {
    background-size: cover;
    background-position: center;
    border-radius: 0;
    box-sizing: border-box;
    overflow: visible;
}

#portfolio_page #hero.hero-layout--image-behind,
#portfolio_page section.home-feature-vedette.feature-layout--image-behind {
    border-radius: 0;
}

.hero-layout--image-behind #title-home #home-about,
.feature-layout--image-behind #title-feature #feature-about {
    height: auto;
    min-height: 0;
}

.hero-layout--image-behind #title-home::before,
.feature-layout--image-behind #title-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--hero-overlay-opacity, 0.24));
    pointer-events: none;
    z-index: 0;
    border-radius: 0;
}

.feature-layout--image-behind #title-feature::before {
    background: rgba(0, 0, 0, var(--feature-overlay-opacity, var(--hero-overlay-opacity, 0.24)));
}

.hero-layout--image-behind #title-home > *,
.feature-layout--image-behind #title-feature > * {
    position: relative;
    z-index: 1;
}

.hero-layout--image-left,
.hero-layout--image-right,
.feature-layout--image-left,
.feature-layout--image-right {
    --hero-side-image-max: 50%;
}

/* Image à gauche : colonne image | colonne texte */
#portfolio_page #hero.hero-layout.hero-layout--image-left #title-home,
.hero-layout--image-left #title-home {
    --side-image-width: min(var(--hero-image-width-ratio, 50%), var(--hero-side-image-max));
    grid-template-columns: minmax(0, var(--side-image-width)) minmax(0, 1fr);
}

#portfolio_page section.home-feature-vedette.feature-layout.feature-layout--image-left #title-feature,
.feature-layout--image-left #title-feature {
    --side-image-width: min(var(--feature-image-width-ratio, 50%), var(--hero-side-image-max));
    grid-template-columns: minmax(0, var(--side-image-width)) minmax(0, 1fr);
}

/* Image à droite : colonne texte | colonne image */
#portfolio_page #hero.hero-layout.hero-layout--image-right #title-home,
.hero-layout--image-right #title-home {
    --side-image-width: min(var(--hero-image-width-ratio, 50%), var(--hero-side-image-max));
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--side-image-width));
}

#portfolio_page section.home-feature-vedette.feature-layout.feature-layout--image-right #title-feature,
.feature-layout--image-right #title-feature {
    --side-image-width: min(var(--feature-image-width-ratio, 50%), var(--hero-side-image-max));
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--side-image-width));
}

.hero-layout--image-left #home-about,
.feature-layout--image-left #feature-about {
    order: 2;
}

.hero-layout--image-left #home-present,
.feature-layout--image-left #feature-present {
    order: 1;
}

.hero-layout--image-right #home-about,
.feature-layout--image-right #feature-about {
    order: 1;
}

.hero-layout--image-right #home-present,
.feature-layout--image-right #feature-present {
    order: 2;
}

/* Image à gauche/droite : le texte reste en haut, l'image s'aligne verticalement dans la zone utile */
.hero-layout--image-left #home-about,
.hero-layout--image-right #home-about,
.feature-layout--image-left #feature-about,
.feature-layout--image-right #feature-about {
    align-self: start;
}

.hero-layout--image-left #home-present,
.hero-layout--image-right #home-present,
.feature-layout--image-left #feature-present,
.feature-layout--image-right #feature-present {
    align-self: center;
    height: auto;
}

.hero-layout--image-left.hero-layout--image-valign-top #home-present,
.hero-layout--image-right.hero-layout--image-valign-top #home-present,
.feature-layout--image-left.feature-layout--image-valign-top #feature-present,
.feature-layout--image-right.feature-layout--image-valign-top #feature-present {
    align-self: start;
}

.hero-layout--image-left.hero-layout--image-valign-center #home-present,
.hero-layout--image-right.hero-layout--image-valign-center #home-present,
.feature-layout--image-left.feature-layout--image-valign-center #feature-present,
.feature-layout--image-right.feature-layout--image-valign-center #feature-present {
    align-self: center;
}

.hero-layout--image-left.hero-layout--image-valign-bottom #home-present,
.hero-layout--image-right.hero-layout--image-valign-bottom #home-present,
.feature-layout--image-left.feature-layout--image-valign-bottom #feature-present,
.feature-layout--image-right.feature-layout--image-valign-bottom #feature-present {
    align-self: end;
}

.hero-layout--image-above #title-home,
.hero-layout--image-below #title-home,
.feature-layout--image-above #title-feature,
.feature-layout--image-below #title-feature {
    grid-template-columns: 1fr;
}

/* Au-dessus / en dessous : l’image reste dans #home-present / #feature-present, jamais en fond de section */
.hero-layout--image-above,
.hero-layout--image-below,
.feature-layout--image-above,
.feature-layout--image-below,
.hero-layout--image-above #title-home,
.hero-layout--image-below #title-home,
.feature-layout--image-above #title-feature,
.feature-layout--image-below #title-feature {
    background-image: none !important;
}

.hero-layout--image-above #home-present,
.feature-layout--image-above #feature-present {
    order: 1;
}

.hero-layout--image-above #home-about,
.feature-layout--image-above #feature-about {
    order: 2;
}

.hero-layout--image-below #home-about,
.feature-layout--image-below #feature-about {
    order: 1;
}

.hero-layout--image-below #home-present,
.feature-layout--image-below #feature-present {
    order: 2;
}

.hero-layout--image-none #home-present,
.feature-layout--image-none #feature-present {
    display: none !important;
}

.hero-layout--image-none #title-home,
.feature-layout--image-none #title-feature {
    column-gap: 0;
    row-gap: 0;
}

.hero-layout #home-present {
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--hero-image-aspect-ratio, 16 / 9);
    background-size: cover;
    background-position: center;
    background-color: var(--modules-black-alpha2, rgba(0, 0, 0, 0.12));
    border-radius: var(--portfolios-thumbnail-radius, 0);
    overflow: hidden;
    display: block;
    position: relative;
}

.feature-layout #feature-present {
    width: 100%;
    max-width: 100%;
    aspect-ratio: var(--feature-image-aspect-ratio, 16 / 9);
    background-size: cover;
    background-position: center;
    background-color: var(--modules-black-alpha2, rgba(0, 0, 0, 0.12));
    border-radius: var(--portfolios-thumbnail-radius, 0);
    overflow: hidden;
    display: block;
    position: relative;
}

/* Bordure / ombre vignettes sur la couche image (comme .thumb.thumb-border) */
.hero-layout:not(.hero-layout--image-behind):not(.hero-layout--image-none) #home-present #home-bg,
.hero-layout:not(.hero-layout--image-behind):not(.hero-layout--image-none) #home-present.customizer-hero-placeholder,
.feature-layout:not(.feature-layout--image-behind):not(.feature-layout--image-none) #feature-present #feature-bg,
.feature-layout:not(.feature-layout--image-behind):not(.feature-layout--image-none) #feature-present.customizer-hero-placeholder {
    box-sizing: border-box;
    border-width: var(--portfolios-thumbnail-border-width, 0px);
    border-style: var(--portfolios-thumbnail-border-type, solid);
    border-color: var(--portfolios-thumbnail-border-color, #222);
    box-shadow: var(--portfolios-thumbnail-box-shadow, none);
    overflow: hidden;
}

/* Image derrière : pas de bordure/ombre sur la couche image (contrairement aux autres dispositions) */
.hero-layout--image-behind #title-home #home-bg,
.hero-layout--image-behind #title-home #home-present #home-bg,
.hero-layout--image-behind #title-home #home-present.customizer-hero-placeholder,
.feature-layout--image-behind #title-feature #feature-bg,
.feature-layout--image-behind #title-feature #feature-present #feature-bg,
.feature-layout--image-behind #title-feature #feature-present.customizer-hero-placeholder {
    border: none;
    box-shadow: none;
}

.hero-layout--image-behind #home-present,
.hero-layout--image-none #home-present,
.feature-layout--image-behind #feature-present,
.feature-layout--image-none #feature-present {
    border-radius: 0;
}

.hero-layout--aspect-square #home-present,
.feature-layout--aspect-square #feature-present {
    aspect-ratio: 1 / 1;
}

.hero-layout--aspect-vertical #home-present,
.feature-layout--aspect-vertical #feature-present {
    aspect-ratio: 9 / 16;
}

/*
 * Portrait 9:16 : ne pas dériver la hauteur de la largeur du bloc
 * (pleine grille ou colonne 50 % → image démesurée). On plafonne
 * la hauteur, la largeur suit le ratio.
 */
.hero-layout--aspect-vertical:not(.hero-layout--image-behind) #home-present,
.feature-layout--aspect-vertical:not(.feature-layout--image-behind) #feature-present {
    --hero-portrait-max-height: min(72vh, 40rem);
    width: min(100%, calc(var(--hero-portrait-max-height) * 9 / 16));
    max-width: 100%;
    height: auto;
    max-height: var(--hero-portrait-max-height);
}

.hero-layout--aspect-vertical.hero-layout--image-left #home-present,
.feature-layout--aspect-vertical.feature-layout--image-left #feature-present {
    justify-self: start;
}

.hero-layout--aspect-vertical.hero-layout--image-right #home-present,
.feature-layout--aspect-vertical.feature-layout--image-right #feature-present {
    justify-self: end;
}

.hero-layout--aspect-vertical.hero-layout--image-above #home-present,
.hero-layout--aspect-vertical.hero-layout--image-below #home-present,
.feature-layout--aspect-vertical.feature-layout--image-above #feature-present,
.feature-layout--aspect-vertical.feature-layout--image-below #feature-present {
    justify-self: center;
}

.hero-layout--aspect-horizontal #home-present,
.feature-layout--aspect-horizontal #feature-present {
    aspect-ratio: 16 / 9;
}

/* Image derrière : la hauteur suit le texte + padding, pas le ratio d'aspect */
.hero-layout--image-behind.hero-layout--aspect-square #title-home,
.hero-layout--image-behind.hero-layout--aspect-vertical #title-home,
.hero-layout--image-behind.hero-layout--aspect-horizontal #title-home,
.feature-layout--image-behind.feature-layout--aspect-square #title-feature,
.feature-layout--image-behind.feature-layout--aspect-vertical #title-feature,
.feature-layout--image-behind.feature-layout--aspect-horizontal #title-feature {
    aspect-ratio: auto;
    min-height: 0;
}

.hero-layout #home-present #home-bg,
.feature-layout #feature-present #feature-bg {
    width: 100%;
    height: 100%;
    min-height: inherit;
    background-size: cover;
    background-position: center;
    border-radius: inherit;
}

/* Ne pas écraser l'arrondi par portfolios-border-radius-l */
.hero-layout #home-present #home-bg.portfolios-border-radius-l,
.feature-layout #feature-present #feature-bg.portfolios-border-radius-l {
    border-radius: inherit;
}

.hero-layout--image-behind.customizer-hero-placeholder #title-home,
.feature-layout--image-behind.customizer-hero-placeholder #title-feature {
    background-color: var(--modules-black-alpha2, rgba(0, 0, 0, 0.12));
}

.hero-layout.customizer-hero-placeholder #home-present,
.feature-layout.customizer-hero-placeholder #feature-present {
    background-image: var(--customizer-hero-placeholder-image, none);
}

.hero-layout #home-about,
.feature-layout #feature-about {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    max-width: 100%;
}

.hero-layout #home-about .social-medias,
.feature-layout #feature-about .social-medias {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-self: stretch;
}

.hero-layout .align-left,
.feature-layout .title-align-left {
    align-items: flex-start;
    text-align: left;
}

.hero-layout .align-center,
.feature-layout .title-align-center {
    align-items: center;
    text-align: center;
}

.hero-layout .align-right,
.feature-layout .title-align-right {
    align-items: flex-end;
    text-align: right;
}

@media (max-width: 768px) {
    /*
     * Gauche / droite : trop étroit en colonnes.
     * Gauche → même pile que « au-dessus » ; droite → même pile que « en dessous ».
     * L’espace texte/image passe de column-gap à row-gap (même variable).
     */
    #portfolio_page #hero.hero-layout.hero-layout--image-left #title-home,
    #portfolio_page #hero.hero-layout.hero-layout--image-right #title-home,
    .hero-layout--image-left #title-home,
    .hero-layout--image-right #title-home,
    #portfolio_page section.home-feature-vedette.feature-layout.feature-layout--image-left #title-feature,
    #portfolio_page section.home-feature-vedette.feature-layout.feature-layout--image-right #title-feature,
    .feature-layout--image-left #title-feature,
    .feature-layout--image-right #title-feature {
        --hero-side-image-max: 100%;
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    #portfolio_page #hero.hero-layout.hero-layout--image-left #title-home,
    #portfolio_page #hero.hero-layout.hero-layout--image-right #title-home,
    .hero-layout--image-left #title-home,
    .hero-layout--image-right #title-home {
        row-gap: var(--hero-content-gap, 48px);
    }

    #portfolio_page section.home-feature-vedette.feature-layout.feature-layout--image-left #title-feature,
    #portfolio_page section.home-feature-vedette.feature-layout.feature-layout--image-right #title-feature,
    .feature-layout--image-left #title-feature,
    .feature-layout--image-right #title-feature {
        row-gap: var(--feature-content-gap, var(--hero-content-gap, 48px));
    }

    .hero-layout--image-left #home-present,
    .feature-layout--image-left #feature-present {
        order: 1;
        align-self: stretch;
        justify-self: center;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .hero-layout--image-left #home-about,
    .feature-layout--image-left #feature-about {
        order: 2;
        align-self: stretch;
    }

    .hero-layout--image-right #home-about,
    .feature-layout--image-right #feature-about {
        order: 1;
        align-self: stretch;
    }

    .hero-layout--image-right #home-present,
    .feature-layout--image-right #feature-present {
        order: 2;
        align-self: stretch;
        justify-self: center;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .hero-layout--image-left.hero-layout--image-valign-top #home-present,
    .hero-layout--image-left.hero-layout--image-valign-center #home-present,
    .hero-layout--image-left.hero-layout--image-valign-bottom #home-present,
    .hero-layout--image-right.hero-layout--image-valign-top #home-present,
    .hero-layout--image-right.hero-layout--image-valign-center #home-present,
    .hero-layout--image-right.hero-layout--image-valign-bottom #home-present,
    .feature-layout--image-left.feature-layout--image-valign-top #feature-present,
    .feature-layout--image-left.feature-layout--image-valign-center #feature-present,
    .feature-layout--image-left.feature-layout--image-valign-bottom #feature-present,
    .feature-layout--image-right.feature-layout--image-valign-top #feature-present,
    .feature-layout--image-right.feature-layout--image-valign-center #feature-present,
    .feature-layout--image-right.feature-layout--image-valign-bottom #feature-present {
        align-self: stretch;
    }

    .hero-layout--aspect-vertical.hero-layout--image-left #home-present,
    .hero-layout--aspect-vertical.hero-layout--image-right #home-present,
    .feature-layout--aspect-vertical.feature-layout--image-left #feature-present,
    .feature-layout--aspect-vertical.feature-layout--image-right #feature-present {
        justify-self: center;
    }
}