.aurore-information {
--_radius: 2rem;
--_border-width: 3px;
--mask: radial-gradient(var(--_radius) at 0 0, #0000 100%, #000);
--mask-border: radial-gradient(
var(--_radius) at 0 0,
#0000 calc(100% - var(--_border-width)),
#000 calc(100% - var(--_border-width)) 100%,
#0000
),
conic-gradient(
at bottom var(--_border-width) left var(--_border-width),
#0000 50%,
#000 0
)
0 100%/100% calc(100% - var(--_radius) + var(--_border-width)) repeat-x;
position: relative;
display: grid;
margin-inline: auto;
padding-block: 1.5rem;
padding-inline: 2rem;
isolation: isolate;
background: none;
}
.aurore-information::before,
.aurore-information::after {
position: absolute;
inset: 0;
content: "";
}
.aurore-information::before {
background-color: var(--aurore-couleur-theme-primary);
-webkit-mask: var(--mask-border);
mask: var(--mask-border);
}
.aurore-information::after {
z-index: -1;
-webkit-mask: var(--mask);
mask: var(--mask);
background-color: var(--aurore-couleur-theme-secondary);
}
.aurore-information > svg {
position: absolute;
top: -1rem;
left: -1rem;
color: var(--aurore-couleur-theme-primary);
}
.flow {
z-index: 1;
}
.flow > *:where(:not(:first-child)) {
margin-block-start: var(--flow-space, 1em);
}
.title {
color: #0c4270;
font-family: "Cormorant Infant";
font-size: 50px;
font-style: italic;
font-weight: 500;
Line-height: 40px;
}
@supports (-webkit-hyphens: none) and (not (-ms-ime-align: auto)) {
h2.title {
color: #ffffff!important;
}
.para p{
-webkit-text-fill-color: #ffffff;
}
}
.para {
color: var(--e-global-color-text);
font-family: "Roboto";
font-size: 1.125rem;
font-weight: 300;
}