.dwa_obrazki {
    
}

.dwa_obrazki .flex-container {
    gap: 120px;
    padding-bottom: 120px;
    padding-top: 120px;
    max-width: 1128px;
    margin-left: auto;
    margin-right: auto;
}

.dwa_obrazki .flex-container .half {
    position: relative;
    width: calc(50% - 60px);
}

.dwa_obrazki .flex-container .half p.title {
    color: var(--KTI-GREY, #363844);
    margin: 48px auto 33px auto;
    font-family: Inter;
    font-size: 45px;
    font-style: normal;
    font-weight: 400;
    line-height: 105%; /* 47.25px */
    letter-spacing: -1.35px;
}

.dwa_obrazki .flex-container .half p.desc {
    color: var(--KTI-GREY, #363844);    
    margin: 0 auto 164px auto;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%; /* 19.2px */
    letter-spacing: -0.32px;
}

.dwa_obrazki .flex-container .half .img1 {
    width: 100%;
    height: auto;
}

.dwa_obrazki .flex-container .half .img2 {
    width: 100%;
    height: auto;
}


/* === Responsive === */
@media (max-width: 1200px) {
  .dwa_obrazki .flex-container {
    gap: 80px;
    padding: 100px 0;
  }
  .dwa_obrazki .flex-container .half {
    width: calc(50% - 40px);
  }
}

@media (max-width: 996px) {
  .dwa_obrazki .flex-container {
    flex-direction: column;
    gap: 40px;
    padding: 20px 0;
  }
  .dwa_obrazki .flex-container .half {
    width: 100%;
  }

  .dwa_obrazki .flex-container .half .img1 {
    width: 85%;
  }

  .dwa_obrazki .flex-container .half .img2 {
    width: 85%;
    margin: 0 0 30px auto;
    display: block;
  }

  /* Na mobile tekst zawsze jako pierwszy blok:
     - gdy .left: tekst jest w pierwszej .half -> OK
     - gdy .right: tekst jest w drugiej .half -> przestawiamy kolejność */
  .dwa_obrazki .flex-container.right .half:last-child { order: 1; } /* tekst */
  .dwa_obrazki .flex-container.right .half:first-child { order: 2; } /* obraz 1 */

  /* Typografia na mobile */
  .dwa_obrazki .flex-container .half p.title {
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 105%; /* 42px */
    letter-spacing: -0.8px;
    margin: 0 0 20px 0;
  }
  .dwa_obrazki .flex-container .half p.desc {
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 115%; /* 18.4px */
    letter-spacing: -0.32px;
    margin: 0 auto 40px auto;
  }
}