.markenwelt-lumos {
  background: #fdece3;
}

.markenwelt-lumos__wrapper {
  display: flex;
  gap: 10px;
  margin: 0 auto;
  max-width: 1010px;
  justify-content: center;
  padding: 40px 10px;
}

.markenwelt-lumos__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  gap: 10px;
}

.markenwelt-lumos__item {
  font-family: "Averta", sans-serif;
  font-weight: 400;
  color: #fff;
  text-align: center;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.markenwelt-lumos__item p {
  font-size: 13px;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  margin: 0 0 10px;
}

.markenwelt-lumos__item-headline {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
}

.markenwelt-lumos__item-headline--inverted {
  color: inherit;
  background: #fff;
}

.markenwelt-lumos__item strong {
  font-size: 16px;
  font-weight: bold;
}

.markenwelt-lumos__icon {
  height: 40px;
  margin: 10px 0;
}

.markenwelt-lumos__item--sqare {
  min-height: 220px;
}

.markenwelt-lumos__item--animation {
  animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.markenwelt-lumos__item--a {
  grid-area: a;
  animation-delay: 0.3s;
  padding: 0 0 20px;
  align-items: flex-start;
}

.markenwelt-lumos__item--a img {
  max-height: 105px;
  display: block;
}

.markenwelt-lumos__item--b {
  grid-area: b;
  animation-delay: 0.1s;
  padding: 0;
  background-color: #cecb62;
  background-image: url('./Zitatgeberbild_Alexander.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  min-height: 340px;
  max-height: 100%;
}

.markenwelt-lumos__item--c {
  background: #cecb62;
  grid-area: c;
  animation-delay: 0.5s;
  justify-content: center;
  color: #000;
}

.markenwelt-lumos__item--c p {
  font-size: 16px;
  color: #000;
}

.markenwelt-lumos__item--c strong {
  font-size: 16px;
  color: #000;
}

.markenwelt-lumos__item--d {
  background: #e23145;
  grid-area: d;
  animation-delay: 0.15s;
  justify-content: center;
}

.markenwelt-lumos__item--d .markenwelt-lumos__item-headline {
  font-size: 22px;
  font-weight: 300;
}

.markenwelt-lumos__item--e {
  background: #ea5193;
  grid-area: e;
  animation-delay: 0.31s;
}

.markenwelt-lumos__item--e .markenwelt-lumos__item-headline {
  color: #ea5193;
}

.markenwelt-lumos__item--f {
  background: #f7ac44;
  grid-area: f;
  animation-delay: 0.01s;
}

.markenwelt-lumos__item--g {
  background: #fed300;
  grid-area: g;
  animation-delay: 0.43s;
}

.markenwelt-lumos__item--g .markenwelt-lumos__item-headline {
  color: #fed300;
}

.markenwelt-lumos__item--h {
  background: #d8085b;
  grid-area: h;
  animation-delay: 0.15s;
}

.markenwelt-lumos__item--i {
  background: #fdb200;
  grid-area: i;
  animation-delay: 0.23s;
}

.markenwelt-lumos__item--j {
  background: #4eae32;
  grid-area: j;
  animation-delay: 0.27s;
}

.markenwelt-lumos__item--k {
  background: #cd1719;
  grid-area: k;
  animation-delay: 0.43s;
}

.markenwelt-lumos__item--k .markenwelt-lumos__item-headline {
  color: #cd1719;
}

.markenwelt-lumos__item--l {
  background: #96a125;
  grid-area: l;
  animation-delay: 0.23s;
}

@keyframes scale-in-center {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (min-width: 360px) {
  .markenwelt-lumos__wrapper {
    padding: 40px 20px;
  }
}

@media screen and (min-width: 420px) {
  .markenwelt-lumos__container {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 1em;
    grid-template-areas:
      "a a"
      "b b"
      "c c"
      "e f"
      "g h"
      "d d"
      "i j"
      "k l";
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 768px) {
  .markenwelt-lumos__container {
    grid-template-areas:
      "a a a"
      "b c c"
      "e f g"
      "d d h"
      "d d i"
      "j k l";
    grid-template-columns: repeat(3, 1fr);
  }

  .markenwelt-lumos__item--sqare {
    aspect-ratio: 1 / 1;
    min-height: auto;
  }

  .markenwelt-lumos__item {
    min-width: 150px;
  }

  .markenwelt-lumos__item--b {
    min-height: 180px;
    max-height: 220px;
  }
}

@media screen and (min-width: 992px) {
  .markenwelt-lumos__container {
    grid-template-areas:
      "a a a a"
      "b b d d"
      "c c d d"
      "e f g h"
      "i j k l";
    grid-template-columns: repeat(4, 1fr);
  }

  .markenwelt-lumos__item {
    min-width: 180px;
  }

  .markenwelt-lumos__item--b {
    min-height: 250px;
    max-height: 260px;
  }
}