.app-container {
  .gradient-blocks {
    .gradient-blocks__container {
      position: relative;
      z-index: 2;
      max-width: 1400px;
      padding: 48px 100px;
      width: 100%;
      margin: auto;
      gap: 8px;
      display: flex;
      flex-direction: column;
      @media (max-width: 1400px) {
        padding: 48px 50px;
      }
      @media (max-width: 1000px) {
        padding: 32px 16px;
      }
    }
    .gradient-blocks__header {
      max-width: 584px;
      margin:auto;
      margin-bottom: 32px;

    }
    .gradient-blocks__wrapper {
      display: flex;
      gap: 32px;
      align-items: center;
      @media (max-width:768px) {
        flex-direction: column;
      }
    }
    .gradient-blocks__items {
      display: flex;
      gap: 32px;
      flex-wrap: wrap;
      width: 69%;
      @media (max-width: 768px) {
        flex-direction: column;
        width: 100%;
        gap:16px;
      }
    }
    .gradient-blocks__image {
      width: 31%;
      @media (max-width:768px) {
        width: 100%;
      }
      img {
        width: 100%;
        object-fit: contain;
        @media (max-width:768px) {
          max-height: 400px;
        }
      }
    }
    .gradient-blocks__item {
      background-color: #F6FDFD;
      width: calc(50% - 16px);
      display: flex;
      flex-direction: column;
      min-height: 264px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      border-radius: 12px;
      gap: 16px;
      position: relative;

      @media (max-width:768px) {
        width: 100%;
      }
    
      p.title {
        color: #020202;
        font-size: 24px;
        font-weight: 600;
        line-height: 1.2;
        font-family: var(--mainfont);
        margin-bottom: 0;
        transition: 0.5s;
        @media (max-width: 1000px) {
          font-size: 19px;
        }
      }
      svg {
        path {
          transition: 0.5s;
        }
      }
    }
  }
}

.gradient-blocks__item {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gradient-blocks__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.gradient-blocks__item > * {
  position: relative;
  z-index: 1;
}

/* LEWA – fiolet */
.gradient-blocks__column:not(.nd) .gradient-blocks__item::before {
  background: radial-gradient(
    60vh 60vh at 24vw 62vh,
    rgba(80, 24, 191, 0.9) 0%,
    rgba(80, 24, 191, 0.35) 55%,
    rgba(80, 24, 191, 0) 70%
  );
  background-attachment: fixed;
  background-size: 160vw 160vh;
  background-repeat: no-repeat;
}

.gradient-blocks__column.nd .gradient-blocks__item::before {
  background: linear-gradient(
    180deg,
    rgba(37, 31, 48, 1) 0%,
    rgba(255, 146, 79, 1) 32%,
    rgba(200, 255, 80, 1) 67%,
    rgba(37, 31, 48, 1) 100%
  );
  background-attachment: fixed;
  background-size: 100% 95%;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
}

/* domyślnie biały tekst */
.gradient-blocks__column.nd .gradient-blocks__item {
  color: #fff;
}

/* jeżeli blok jest bardziej na zielonej części gradientu – zmień tekst na czarny */
.gradient-blocks__column.nd .gradient-blocks__item.green-text {
  color: #000;
}

@media (max-width: 767px) {
  .gradient-blocks__item::before {
    background-attachment: scroll;
  }
}
/* Wymuś czarny tekst na zielonej części */
.gradient-blocks__column.nd .gradient-blocks__item.green-text,
.gradient-blocks__column.nd .gradient-blocks__item.green-text *,
.gradient-blocks__column.nd .gradient-blocks__item.green-text p.title {
  color: #000 !important;

  svg {
    path {
      fill: black;
    }
  }
}