/* Ustawienie paddingu i marginesu głównego kontenera */
main {
    padding: 0 20px; /* Margines 20px od lewej i prawej strony ekranu */
    margin-top: 20px; /* Margines 20px od góry */
  }
  
  /* Kontener sekcji O mnie */
  .about-container {
    display: flex;  /* Flexbox dla kontenera */
    justify-content: space-between;  /* Rozstawienie elementów na szerokość */
    align-items: flex-start;  /* Wyrównanie elementów do góry */
    gap: 20px;  /* Odstęp między zdjęciem a sekcją informacji */
    flex-wrap: wrap;  /* Elementy mogą przechodzić do nowej linii na małych ekranach */
    margin-top: 20px;
  }
  
  /* Styl zdjęcia */
  .about-image {
    flex: 1 1 45%;  /* Zajmuje 45% szerokości dostępnego miejsca */
    min-width: 300px;  /* Minimalna szerokość dla zdjęcia */
    height: 33vh;  /* Wysokość ustawiona na 33% wysokości ekranu */
  }
  
  .about-image img {
    width: 100%;  /* Szerokość na 100% kontenera */
    height: 100%;  /* Wysokość na 100% kontenera */
    object-fit: cover;  /* Zdjęcie wypełnia cały kontener bez zniekształcania */
    border-radius: 3px;  /* Zaokrąglone rogi */
  }
  
  /* Sekcja z danymi o Tobie */
  .about-details {
    flex: 1 1 45%;  /* Sekcja o Tobie zajmuje 45% szerokości */
    min-width: 300px;  /* Minimalna szerokość dla tej sekcji */
    background-color: #f9f9f9;  /* Tło sekcji */
    padding: 20px;  /* Padding */
    border-radius: 3px;  /* Zaokrąglone rogi */
    height: auto;  /* Dostosowanie wysokości w zależności od zawartości */
    text-align: center;  /* Wyśrodkowanie tekstu */
    display: flex;  /* Flexbox w celu wyrównania zawartości */
    flex-direction: column;  /* Kolumnowy układ */
    justify-content: flex-start;  /* Wyrównanie w pionie do góry */
    align-items: center;  /* Wyśrodkowanie w poziomie */
  }
  
  /* Styl dla nagłówków w sekcji O mnie */
  .about-details h2 {
    margin-bottom: 20px; /* Dodanie większego odstępu pod nagłówkiem */
  }
  
  /* Styl dla poszczególnych sekcji o Tobie */
  .about-item {
    margin-bottom: 20px; /* Odstęp między elementami */
  }
  
  /* Styl dla tytułów w sekcji o Tobie */
  .about-item h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }
  
  /* Styl dla tekstu w sekcji O mnie */
  .about-item p {
    font-size: 1rem;
    color: #555; /* Kolor tekstu */
  }
  
  /* Responsywność - ustawienie zdjęcia na pełną szerokość na małych ekranach */
  @media (max-width: 768px) {
    .about-container {
      flex-direction: column;  /* Ustawienie elementów w kolumnie na małych ekranach */
    }
  
    .about-image,
    .about-details {
      flex: 1 1 100%;  /* Każdy element zajmuje całą szerokość */
      min-width: 100%;
    }
  
    .about-image {
      height: 250px;  /* Zmniejszenie wysokości zdjęcia na małych ekranach */
    }
  }