.beauty-opis {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; /* Dodano padding, aby treść nie przylegała do krawędzi ekranu */
}

.beauty-opis h3 {
    color: #000000;
    font-size: 30px;
    font-weight: bold;
        
}

.beauty-1-text > h3 {
    color: #fff;
}

.beauty-opis-wrap {
    max-width: 1180px;
    margin: auto;
    font-family: "Montserrat", Arial, sans-serif;
}

.beauty-opis-wrap p {
    font-size: 16px;
    color: #2b2a29;
    line-height: 1.6; /* Dodano, aby poprawić czytelność */
}

.beauty-1 .beauty-kaf-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8F4EF;
    flex-wrap: wrap; /* Zmieniono na flex-wrap, żeby elastycznie układać elementy */
}

.beauty-kaf-wrap > h3 {
    text-align: center;
}

.beauty-1 .beauty-kaf-wrap > div {
    flex: 1 1 auto;
}

.beauty-opis img {
    display: block;
    max-width: 100%; /* Upewnia się, że obrazki nie wychodzą poza kontener */
    height: auto;
}

.photo-item {
    width: 100%; /* Upewnia się, że kontener obrazu jest elastyczny */
        display: flex;
    justify-content: center;  /* poziome wyśrodkowanie */
    align-items: center;      /* pionowe wyśrodkowanie (jeśli potrzebne) */
}

.beauty-full-text {
    text-align: center;
    font-size: 20px;
    color: #2b2a29;
    padding: 20px 0; /* Dodano, aby zapewnić odstęp */
}

.beauty-full-text .beauty-descs {
    max-width: 945px;
    margin: auto;
    text-align: center;
}

.beauty-opis-wrap > div:not(:first-child) {
    margin-top: 60px;
}

.beauty-3 {
    text-align: center;
}

.beauty-opis .beauty-kaf-wrap > .beauty-titles,
.beauty-opis .beauty-kaf-wrap > .beauty-2-text > .beauty-titles {
    text-align: center;
}

.beauty-half .beauty-kaf-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: #fff;
}

.beauty-half .beauty-kaf-wrap > div {
    flex: 1 1 50%; /* Zmieniono, aby lepiej rozkładać elementy w dwóch kolumnach */
    height: 100%;
}

.beauty-half .beauty-kaf-wrap .beauty-text > div {
    max-width: 437px;
    margin: auto;
}

.beauty-full-img img {
    width: 100%;
    height: auto;
}

/* Dostosowanie do wszystkich ekranów */
@media (max-width: 959px) {
    .beauty-opis h3 {
        font-size: 24px; /* Zmniejszono rozmiar czcionki na urządzeniach mobilnych */
    }

    .beauty-opis-wrap p {
        font-size: 14px; /* Zmniejszono rozmiar czcionki tekstu */
    }

    .beauty-1 .beauty-kaf-wrap {
        flex-direction: column; /* Upewnia się, że elementy układają się w jednej kolumnie */
    }

    .beauty-half .beauty-kaf-wrap {
        flex-direction: column; /* Upewnia się, że elementy układają się w jednej kolumnie */
    }

    .beauty-half .beauty-kaf-wrap > div {
        flex: 1 1 100%; /* Pełna szerokość na mniejszych ekranach */
        max-width: 100%;
        text-align: center; /* Wyśrodkowano tekst */
    }
}