/* stylelint-disable */
/* stylelint-disable */
.grey-block {
  display: grid;
  padding: var(--spacing-xlarge);
  gap: var(--spacing-large);
  color: var(--dark-grey);
}
.grey-block.spacing-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.grey-block.spacing-small {
  margin-top: calc(0.8 * var(--spacing-small));
  margin-bottom: calc(0.8 * var(--spacing-small));
}
@media (min-width: 1024px) {
  .grey-block.spacing-small {
    margin-top: var(--spacing-small);
    margin-bottom: var(--spacing-small);
  }
}
.grey-block.spacing-medium {
  margin-top: calc(0.8 * var(--spacing-medium));
  margin-bottom: calc(0.8 * var(--spacing-medium));
}
@media (min-width: 1024px) {
  .grey-block.spacing-medium {
    margin-top: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
  }
}
.grey-block.spacing-large {
  margin-top: calc(0.8 * var(--spacing-large));
  margin-bottom: calc(0.8 * var(--spacing-large));
}
@media (min-width: 1024px) {
  .grey-block.spacing-large {
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-large);
  }
}
@media (min-width: 1024px) {
  .grey-block {
    grid-template-rows: auto;
    max-width: 46.67%;
    margin-inline: auto;
  }
}
.grey-block__headline {
  margin: 0;
}
@media (min-width: 1024px) {
  .grey-block__headline {
    grid-column: 1/3;
  }
}
@media (min-width: 1024px) {
  .grey-block__info-block {
    grid-column: 1/3;
  }
}
.grey-block__imageContainer {
  width: 226px;
  max-width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .grey-block__imageContainer {
    grid-column: 1/3;
  }
}
.grey-block__imageContainer picture,
.grey-block__imageContainer img {
  display: block;
  width: 226px;
  max-width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .grey-block__columns--1-items, .grey-block__columns--2-items, .grey-block__columns--3-items {
    display: grid;
  }
}
.grey-block__columns--1-items {
  grid-column: 1/-1;
  grid-template-columns: 1fr;
}
.grey-block__columns--2-items {
  display: grid;
}
@media (min-width: 768px) {
  .grey-block__columns--2-items {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xlarge);
  }
  .grey-block__columns--2-items > * {
    grid-column: span 1;
  }
}
.grey-block ul {
  padding-left: 0;
  /* ----------------------------------------
   Nested UL: remove or reset bullets
  ---------------------------------------- */
}
.grey-block ul > li {
  display: flex;
  gap: var(--spacing-small);
  align-items: flex-start;
  flex-wrap: wrap;
}
.grey-block ul > li::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--dark-grey);
  flex-shrink: 0;
  margin-top: 2px;
  mask-image: url("../../icons/arrow-right.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("../../icons/arrow-right.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.grey-block ul > li > p {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.grey-block ul > li > ul {
  flex-basis: 100%;
  margin-left: 28px;
  margin-top: var(--spacing-small);
}
.grey-block ul > li > p + ul {
  padding: 0;
  flex-basis: 100%;
  margin: 0 0 0 28px;
}
.grey-block ul:first-child {
  margin-top: 0;
}
.grey-block ul:last-child {
  margin-bottom: 0;
}
.grey-block ul ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.grey-block ul ul > li {
  display: flex;
  gap: var(--spacing-small);
  align-items: flex-start;
}
.grey-block ul ul > li::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--dark-grey);
  flex-shrink: 0;
  margin-top: 2px;
  mask-image: url("../../icons/arrow-right.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("../../icons/arrow-right.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.grey-block ul ul > li > p {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.grey-block__grey-background {
  border-radius: var(--border-radius);
  background-color: var(--light-grey);
  color: var(--fixed-dark-grey);
}
.grey-block__grey-background .grey-block__column ul > li::before,
.grey-block__grey-background .grey-block__info-block ul > li::before {
  background-color: var(--fixed-dark-grey);
}

.grey-block__columns.grey-block__columns--3-items {
  display: grid;
  gap: var(--spacing-xlarge);
}
@media (min-width: 768px) {
  .grey-block__columns.grey-block__columns--3-items {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-xlarge);
  }
  .grey-block__columns.grey-block__columns--3-items > * {
    grid-column: span 1;
  }
}

/*# sourceMappingURL=grey-block.css.map */