:root {
  --tile: 22px;  
  --rad-w: 780px;                     /* wymiar gradientu na mobile */
  --rad-h: 460px;
  --rad-x: 22%;                       /* pozycja ogniska gradientu na mobile */
  --rad-y: 34%;
  --noise-opacity: 0.08;
}

@media (min-width: 768px) {
  :root {
    --tile: 28px;
    --rad-w: 1000px;
    --rad-h: 560px;
    --rad-x: 30%;
    --rad-y: 24%;
  }
}

@media (min-width: 1200px) {
  :root {
    --tile: 34px;
    --rad-w: 1200px;
    --rad-h: 680px;
    --rad-x: 30%;
    --rad-y: 20%;
  }
}

.offer {
  position: relative;
  isolation: isolate;
  min-height: 60vh;
  overflow: hidden;
  background:
    radial-gradient(var(--rad-w) var(--rad-h) at var(--rad-x) var(--rad-y),
      #7a5cff, #4a2bb5 70%, #170c43);
}

.offer > .container {
  min-height: 100%;
}

.offer > canvas#bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image:
    linear-gradient(#ffffff24 1px, transparent 1px),
    linear-gradient(90deg, #ffffff10 1px, transparent 1px);
  background-size: var(--tile) var(--tile), var(--tile) var(--tile);
  mix-blend-mode: soft-light;
}

.swiper-slide{
  width: 62vw;
  min-height: 50vh;
}

.offer-icon-wrap {
  width: 60px;
  height: 60px;
}
.offer-icon {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}