.app-container {
  .gradient-blocks {
    .gradient-blocks__container {
      position: relative;
      z-index: 2;
      max-width: 1192px;
      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__image {
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: 0.5;              
      overflow: hidden;
    
      --fade: 50%;         
    
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 calc(var(--fade)),
        #000 calc(100% - var(--fade)),
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 calc(var(--fade)),
        #000 calc(100% - var(--fade)),
        transparent 100%
      );
    
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
    }
    
    .gradient-blocks__header {
      &.light {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          color: white;
          margin-bottom: 8px;
        }
        p,
        ul li {
          color: #ffffffbf;
        }
      }
      span.subheader {
        color: rgba(255, 255, 255, 0.5);
        svg {
          path {
            fill: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
    .gradient-blocks__items {
      display: flex;
      gap: 16px;
      @media (max-width: 767px) {
        flex-direction: column;
      }
    }
    .gradient-blocks__column {
      width: 50%;
      display: flex;
      flex-direction: column;
      gap: 16px;
      @media (max-width: 767px) {
        width: 100%;
      }
      &:first-child {
        margin-top: 32px;
      }
    }
    .gradient-blocks__item {
      background-color: #251f30;
      width: 100%;
      display: flex;
      flex-direction: column;
      min-height: 260px;
      padding: 48px;
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      gap: 24px;
      position: relative;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
      @media (max-width: 767px) {
        padding: 32px;
      }
      p.title {
        color: #fff;
        font-size: 23px;
        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;
    }
  }
}