/* --- Sekcja "O-mnie" --- */
.about-me-container#top {
    margin-bottom: 40px; /* Odstęp pod sekcją profilu */
}

.about-me-header {
    display: flex; /* Użyj Flexboxa */
    flex-direction: column; /* Domyślnie elementy będą ułożone w kolumnie na małych ekranach */
    align-items: center; /* Wyśrodkuj elementy w poziomie */
    gap: 20px; /* Odstęp między awatarem a tekstem */
    text-align: center; /* Wyśrodkowanie tekstu */
}

/* Układ poziomy na większych ekranach */
@media (min-width: 768px) {
    .about-me-header {
        flex-direction: row;
        text-align: left;
        align-items: flex-start; /* Wyrównaj do góry */
    }
}

#about-me-avatar {
    width: 184px;
    height: 184px;
    background-image: url('/assets/images/avatars/home-avatar.jpg');
    background-position: center;
    background-size: cover; /* Upewnij się, że obrazek pokrywa cały obszar */
    border: 1px solid transparent;
    border-image: url('/assets/images/avatars/border.png') 17 fill stretch;
    box-sizing: content-box;
    flex-shrink: 0; /* Zapobiega zmniejszaniu się awatara */
}

.about-me-username {
    padding-top: 0; /* Usunięte nadmiarowe padding-top, flexbox ogarnie odstępy */
    font-size: 2.2em; /* Użyj jednostek względnych */
    font-weight: bold;
    color: #333; /* Ciemniejszy kolor dla lepszego kontrastu */
}

.about-me-bio {
    margin-top: 10px; /* Zwiększ odstęp */
    color: #666; /* Nieco ciemniejszy kolor */
    line-height: 1.6; /* Popraw czytelność tekstu */
    max-width: 600px; /* Ogranicz szerokość biogramu */
}

.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* wypycha autora na dół */
}


#section-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* elastyczne 3 kolumny */
  gap: 20px; /* odstęp między cytatami */
  max-width: 1200px;
  margin: 20px auto;
  padding: 10px;
}

.quote-image {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 15px;
  flex-wrap: wrap; /* pozwala obrazkom przełamywać wiersze na mniejszych ekranach */
}

.quote-image img {
  border: 2px solid transparent;
  transition: border 0.3s, transform 0.3s;
  max-width: 150px; /* ograniczenie szerokości obrazków */
  width: 100%; /* obrazki dopasują się do kontenera w małych ekranach */
  height: auto;
}

.quote-text {
  font-size: 1.1em;
  margin: 10px 0;
  padding: 0 5px;
  white-space: pre-line;
  line-height: 1.6; /* zwiększa odstęp między liniami */
}


.quote-source {
  font-size: 0.9em;
  color: #555;
  padding: 0 5px;
  white-space: pre-line;
  line-height: 1.6; /* zwiększa odstęp między liniami */
}

/* Responsywność: dla ekranów węższych niż 600px */
@media (max-width: 600px) {
  .quote-image {
    gap: 5px;
  }

  .quote-image img {
    max-width: 100px; /* zmniejszamy obrazki na małych ekranach */
  }

  .quote-text {
    font-size: 1em;
  }

  .quote-source {
    font-size: 0.85em;
  }
}

#sekcja-inne { 
display: flex; 
justify-content: center; 
margin: 0 auto; 
max-width: 100%;
} 

#sekcja-inne img 
{ 
max-width: 100%; 
height: auto; 
display: block; 
cursor: pointer;
}


.img-candle-iryna,
.text-wlm-iryna {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.text-wlm-iryna {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}

.link-iryna {
    text-align: center;
    font-size: 18px;
}

/* Responsywność: dla ekranów węższych niż 600px 
@media (max-width: 600px) {
  .img-candle-iryna {
    max-width: 100px;
  }
}
*/