@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Bartle&display=swap');

.glass-panel{
  /* ВАЖНО: БЕЗ position, чтобы не ломать Zero-блок */

  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.38);

  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);

  box-shadow:
    0 20px 20px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.08);
}

.glass-panel::before{
  content:"";
  position:absolute;
  inset:2px 2px auto 2px;
  height:42%;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  mix-blend-mode: screen;
  opacity:.65;
}

.glass-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
\
\
\
\
");
}

@supports not (backdrop-filter: blur(1px)){
  .glass-panel{
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
  }
  .glass-panel::after{ opacity:.06; }
}

/* МОБИЛКА */
@media screen and (max-width: 640px){
  body .glass-panel{
    border-radius: 16px !important;
    box-shadow:
      0 6px 10px rgba(0,0,0,.16) !important,
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 -1px 0 rgba(0,0,0,.04);
  }

  body .glass-panel::before{
    opacity: .35 !important;
  }

  body .glass-panel::after{
    opacity: .08 !important;
  }
}