Responsive page using pure CSS

@Hanka8 Hello great job on the solution. Z-index itself doensn't do anything unless you add a position other than static to it. Most of the time relative is used if you just need to overlap another element. Try to see if it works. Cheers to an awesome challenge completed. Algorithm for CSS grid includes z-index so if you use grid, you dont need to include a position. That is to say if you display is grid you dont need to set the element to any position. It would just work right out of the box for grid. See below for a quick read on z-index:

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Hi Huynh, thanks for your comment. I added position: relative / absolute to my elements, but it still doestn work. I dont understand why (Its better seen when you change box-shadow´s color to for example red).

.mobile__content__answer {
  background: white;
  color: var(--mobileTextColor2);
  font-size: var(--mobTextSize);
  line-height: var(--mobTextLize);
  border-radius: 10px;
  padding: 6px 8px;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  max-width: calc(128rem/16);
  position: relative;
  z-index: 2;
}

.mobile__content__answer::before {
  content:"";
  position: absolute;
  width:100%;
  right: 0px;
  bottom:-2px;
  transform:scale(.8);
  box-shadow: 0px 0px 5px 3px #eceaee;
  z-index: 1;
}