Ecosysteme/presentation/css/layout.css

:root {
  --split-div-size: 0;
  --split-gap-size: 0;
}
split {
  display: flex;
  gap: unset;
  flex-flow: row wrap;
  align-content: center;
}
split[even] > * {
  flex: 1;
}
split[no-margin] > * {
  --r-block-margin: 0;
}
split[wrap="1"] > * {
  flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (1 - 1))) - (calc(var(--dbg-size) * 1 * 2))) / 1);
}
split[wrap="2"] > * {
  flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (2 - 1))) - (calc(var(--dbg-size) * 2 * 2))) / 2);
}
split[wrap="3"] > * {
  flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (3 - 1))) - (calc(var(--dbg-size) * 3 * 2))) / 3);
}
split[wrap="4"] > * {
  flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (4 - 1))) - (calc(var(--dbg-size) * 4 * 2))) / 4);
}
split[wrap="5"] > * {
  flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (5 - 1))) - (calc(var(--dbg-size) * 5 * 2))) / 5);
}
split[wrap="6"] > * {
  flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (6 - 1))) - (calc(var(--dbg-size) * 6 * 2))) / 6);
}
split[wrap="7"] > * {
  flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (7 - 1))) - (calc(var(--dbg-size) * 7 * 2))) / 7);
}
split[wrap="8"] > * {
  flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (8 - 1))) - (calc(var(--dbg-size) * 8 * 2))) / 8);
}
split[wrap="9"] > * {
  flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (9 - 1))) - (calc(var(--dbg-size) * 9 * 2))) / 9);
}
split[wrap="10"] > * {
  flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (10 - 1))) - (calc(var(--dbg-size) * 10 * 2))) / 10);
}
split[wrap="11"] > * {
  flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (11 - 1))) - (calc(var(--dbg-size) * 11 * 2))) / 11);
}
split[wrap="12"] > * {
  flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (12 - 1))) - (calc(var(--dbg-size) * 12 * 2))) / 12);
}
split[gap="0"] {
  --split-gap-size: 0;
  gap: unset;
}
split[gap="1"] {
  --split-gap-size: 1em;
  gap: 1em;
}
split[gap="2"] {
  --split-gap-size: 2em;
  gap: 2em;
}
split[gap="3"] {
  --split-gap-size: 3em;
  gap: 3em;
}
split[gap="4"] {
  --split-gap-size: 4em;
  gap: 4em;
}
split[gap="5"] {
  --split-gap-size: 5em;
  gap: 5em;
}
split[left="1"] > *:first-child {
  flex: 1;
}
split[middle="1"] > *:nth-child(2) {
  flex: 1 !important;
}
split[right="1"] > *:nth-child(2) {
  flex: 1;
}
split[right="1"] > *:nth-child(3) {
  flex: 1;
}
split[left="2"] > *:first-child {
  flex: 2;
}
split[middle="2"] > *:nth-child(2) {
  flex: 2 !important;
}
split[right="2"] > *:nth-child(2) {
  flex: 2;
}
split[right="2"] > *:nth-child(3) {
  flex: 2;
}
split[left="3"] > *:first-child {
  flex: 3;
}
split[middle="3"] > *:nth-child(2) {
  flex: 3 !important;
}
split[right="3"] > *:nth-child(2) {
  flex: 3;
}
split[right="3"] > *:nth-child(3) {
  flex: 3;
}
split[left="4"] > *:first-child {
  flex: 4;
}
split[middle="4"] > *:nth-child(2) {
  flex: 4 !important;
}
split[right="4"] > *:nth-child(2) {
  flex: 4;
}
split[right="4"] > *:nth-child(3) {
  flex: 4;
}
split[left="5"] > *:first-child {
  flex: 5;
}
split[middle="5"] > *:nth-child(2) {
  flex: 5 !important;
}
split[right="5"] > *:nth-child(2) {
  flex: 5;
}
split[right="5"] > *:nth-child(3) {
  flex: 5;
}
split[left="6"] > *:first-child {
  flex: 6;
}
split[middle="6"] > *:nth-child(2) {
  flex: 6 !important;
}
split[right="6"] > *:nth-child(2) {
  flex: 6;
}
split[right="6"] > *:nth-child(3) {
  flex: 6;
}
split[left="7"] > *:first-child {
  flex: 7;
}
split[middle="7"] > *:nth-child(2) {
  flex: 7 !important;
}
split[right="7"] > *:nth-child(2) {
  flex: 7;
}
split[right="7"] > *:nth-child(3) {
  flex: 7;
}
split[left="8"] > *:first-child {
  flex: 8;
}
split[middle="8"] > *:nth-child(2) {
  flex: 8 !important;
}
split[right="8"] > *:nth-child(2) {
  flex: 8;
}
split[right="8"] > *:nth-child(3) {
  flex: 8;
}
split[left="9"] > *:first-child {
  flex: 9;
}
split[middle="9"] > *:nth-child(2) {
  flex: 9 !important;
}
split[right="9"] > *:nth-child(2) {
  flex: 9;
}
split[right="9"] > *:nth-child(3) {
  flex: 9;
}
split[left="10"] > *:first-child {
  flex: 10;
}
split[middle="10"] > *:nth-child(2) {
  flex: 10 !important;
}
split[right="10"] > *:nth-child(2) {
  flex: 10;
}
split[right="10"] > *:nth-child(3) {
  flex: 10;
}
split[left="11"] > *:first-child {
  flex: 11;
}
split[middle="11"] > *:nth-child(2) {
  flex: 11 !important;
}
split[right="11"] > *:nth-child(2) {
  flex: 11;
}
split[right="11"] > *:nth-child(3) {
  flex: 11;
}
.align-left {
  display: flex;
  align-items: flex-start;
}
.align-left p {
  text-align: left;
}
.align-center {
  display: flex;
  align-items: center;
}
.align-center p {
  text-align: center;
}
.align-right {
  display: flex;
  align-items: flex-end;
}
.align-right p {
  text-align: right;
}
h1.align-left,
h2.align-left,
h3.align-left,
h4.align-left,
h5.align-left,
h6.align-left,
p.align-left {
  text-align: left;
  align-self: flex-start;
}
h1.align-right,
h2.align-right,
h3.align-right,
h4.align-right,
h5.align-right,
h6.align-right,
p.align-right {
  text-align: right;
  align-self: flex-end;
}
h1.align-center,
h2.align-center,
h3.align-center,
h4.align-center,
h5.align-center,
h6.align-center,
p.align-center {
  text-align: center;
  align-self: center;
}
:root {
  --animation-duration: 0.7s;
}
.slower {
  --animation-duration: 1.3s;
}
.faster {
  --animation-duration: 0.35s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}
@keyframes slideRightIn {
  from {
    transform: translate3d(-200px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideRightIn {
  animation-name: fadeIn, slideRightIn;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}
@keyframes slideLeftIn {
  from {
    transform: translate3d(200px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideLeftIn {
  animation-name: fadeIn, slideLeftIn;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}
@keyframes slideUpIn {
  from {
    transform: translate3d(0, 150px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideUpIn {
  animation-name: fadeIn, slideUpIn;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.5, 1);
  animation-fill-mode: both;
}
@keyframes slideDownIn {
  from {
    transform: translate3d(0, -150px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slideDownIn {
  animation-name: fadeIn, slideDownIn;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.5, 1);
  animation-fill-mode: both;
}
@keyframes fadeOut {
  from {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  animation-name: fadeOut;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}
@keyframes slideRightOut {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(200px, 0, 0);
  }
}
.slideRightOut {
  animation-name: fadeOut, slideRightOut;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}
@keyframes slideLeftOut {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-200px, 0, 0);
  }
}
.slideLeftOut {
  animation-name: fadeOut, slideLeftOut;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}
@keyframes slideUpOut {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -150px, 0);
  }
}
.slideUpOut {
  animation-name: fadeOut, slideUpOut;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.5, 1);
  animation-fill-mode: both;
}
@keyframes slideDownOut {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 150px, 0);
  }
}
.slideDownOut {
  animation-name: fadeOut, slideDownOut;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.5, 1);
  animation-fill-mode: both;
}
@keyframes scaleUp {
  from {
    transform: scale3d(0.78, 0.78, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.scaleUp {
  animation-name: fadeIn, scaleUp;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}
@keyframes scaleUpOut {
  from {
    transform: scale3d(1, 1, 1);
  }
  to {
    transform: scale3d(1.23, 1.23, 1);
  }
}
.scaleUpOut {
  animation-name: fadeOut, scaleUpOut;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.5, 1);
  animation-fill-mode: both;
}
@keyframes scaleDown {
  from {
    transform: scale3d(1.23, 1.23, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.scaleDown {
  animation-name: fadeIn, scaleDown;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
  animation-fill-mode: both;
}
@keyframes scaleDownOut {
  from {
    transform: scale3d(1, 1, 1);
  }
  to {
    transform: scale3d(0.78, 0.78, 1);
  }
}
.scaleDownOut {
  animation-name: fadeOut, scaleDownOut;
  animation-duration: var(--animation-duration);
  animation-timing-function: cubic-bezier(0.1, 0.5, 1);
  animation-fill-mode: both;
}
:root {
  --callout-background-color:
    255,
    255,
    255;
}
.callout-color1 {
  --callout-color:
    108,
    192,
    245;
}
.callout-color2 {
  --callout-color:
    109,
    197,
    217;
}
.callout-color3 {
  --callout-color:
    113,
    208,
    136;
}
.callout-color4 {
  --callout-color:
    160,
    224,
    107;
}
.callout-color5 {
  --callout-color:
    238,
    177,
    91;
}
.callout-color6 {
  --callout-color:
    234,
    136,
    133;
}
.callout-color7 {
  --callout-color:
    230,
    98,
    121;
}
.callout-color8 {
  --callout-color:
    152,
    126,
    243;
}
.callout-color9 {
  --callout-color:
    182,
    182,
    182;
}
.callout-color-default {
  --callout-color:
    129,
    167,
    244;
}
.has-light-background {
  --callout-background-color:
    160,
    160,
    160;
}
.callout {
  border-left: 4px solid rgb(var(--callout-color));
  border-radius: 2px;
  background-color: rgba(var(--callout-background-color), 0.2);
  margin: 1em 0;
}
.callout-title {
  padding: 10px;
  display: flex;
  gap: 10px;
  background-color: rgba(var(--callout-color), 0.3);
}
.callout-icon {
  flex: 0 0 auto;
  display: flex;
  align-self: center;
  color: rgb(var(--callout-color));
}
.callout-title-inner {
  flex: 1 1 0;
  font-weight: 700;
}
.callout-content {
  overflow-x: auto;
  padding: 5px 15px;
}
.stretch-column > * {
  flex: 1;
  height: 1%;
  width: 100%;
}
.stretch-row > * {
  flex: 1;
  height: 100%;
  width: 1%;
}
.stretch-column > p > img,
.stretch-row > p > img,
.stretch-column > p > video,
.stretch-row > p > video,
.stretch-column > p > iframe,
.stretch-row > p > iframe {
  height: 100%;
  width: 100%;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover;
}
:root {
  --dbg-size: 0;
}
.dbg,
.dbg * {
  --dbg-size: 1px;
  border: 1px solid red;
}
.reset-margin,
.reset-margin > * {
  --r-block-margin: 0;
  --r-heading-margin: 0;
}
.flex-even > * {
  flex: 1;
}