/**
 * @file
 * Base stylesheet for flex-box based grid of layout sections.
 */

:root {
  --sp: 36px;
  --sp2: calc(2 * var(--sp));
  --sp3: calc(3 * var(--sp));
  --sp4: calc(4 * var(--sp));
}

.layout,
.c-title {
  width: 100%;
}

.layout__area {
  display: flex;
  flex-wrap: wrap;
}

.layout-builder__add-block {
  margin: auto;
}

.c-title--text-align-center {
  text-align: center;
}

.c-title--text-align-left {
  text-align: left;
}

.c-title--text-align-right {
  text-align: right;
}

.u-bg-red {
  background-color: #eb4d4b !important;
}

.u-bg-green {
  background-color: #6ab04c !important;
}

.u-bg-blue {
  background-color: #4834d4 !important;
}

.u-bg-yellow {
  background-color: #f9ca24 !important;
}

.u-bg-white {
  background-color: #fff !important;
}

.u-bg-black {
  background-color: #1b1b1d !important;
}

.u-padding-top-s {
  padding-top: var(--sp);
}

.u-padding-top-m {
  padding-top: var(--sp2);
}

.u-padding-top-l {
  padding-top: var(--sp3);
}

.u-padding-top-xl {
  padding-top: var(--sp4);
}

.u-padding-bottom-s {
  padding-bottom: var(--sp);
}

.u-padding-bottom-m {
  padding-bottom: var(--sp2);
}

.u-padding-bottom-l {
  padding-bottom: var(--sp3);
}

.u-padding-bottom-xl {
  padding-bottom: var(--sp4);
}

.u-padding-left-s {
  padding-left: var(--sp);
}

.u-padding-left-m {
  padding-left: var(--sp2);
}

.u-padding-left-l {
  padding-left: var(--sp3);
}

.u-padding-left-xl {
  padding-left: var(--sp4);
}

.u-padding-right-s {
  padding-right: var(--sp);
}

.u-padding-right-m {
  padding-right: var(--sp2);
}

.u-padding-right-l {
  padding-right: var(--sp3);
}

.u-padding-right-xl {
  padding-right: var(--sp4);
}

.u-spacing-top-s {
  margin-top: var(--sp);
}

.u-spacing-top-m {
  margin-top: var(--sp2);
}

.u-spacing-top-l {
  margin-top: var(--sp3);
}

.u-spacing-top-xl {
  margin-top: var(--sp4);
}

.u-spacing-bottom-s {
  margin-bottom: var(--sp);
}

.u-spacing-bottom-m {
  margin-bottom: var(--sp2);
}

.u-spacing-bottom-l {
  margin-bottom: var(--sp3);
}

.u-spacing-bottom-xl {
  margin-bottom: var(--sp4);
}

.u-spacing-left-s {
  margin-left: var(--sp);
}

.u-spacing-left-m {
  margin-left: var(--sp2);
}

.u-spacing-left-l {
  margin-left: var(--sp3);
}

.u-spacing-left-xl {
  margin-left: var(--sp4);
}

.u-spacing-right-s {
  margin-right: var(--sp);
}

.u-spacing-right-m {
  margin-right: var(--sp2);
}

.u-spacing-right-l {
  margin-right: var(--sp3);
}

.u-spacing-right-xl {
  margin-right: var(--sp4);
}