/* =========================================
   EDYTA MNICH — PORTFOLIO GALLERY
   ========================================= */

/* Cała sekcja */

.em-portfolio-page .em-portfolio-section {
    background: #FAF7F3;
    padding: 85px 24px 100px;
}

/* Szerokość galerii */

.em-portfolio-page .em-portfolio-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

/* Elegancki układ typu masonry */

.em-portfolio-page .em-portfolio-gallery {
    display: block !important;
    columns: 3;
    column-gap: 18px;
    width: 100%;
}

/* Pojedynczy kafelek */

.em-portfolio-page .em-portfolio-photo {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    overflow: hidden;
    border-radius: 4px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    background: #F3EDE6;
}

/* Link obejmujący zdjęcie */

.em-portfolio-page .em-portfolio-photo a {
    display: block;
    width: 100%;
    height: auto;
    text-decoration: none;
    line-height: 0;
}

/* Oryginalne proporcje zdjęć */

.em-portfolio-page .em-portfolio-photo img {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    transform: none;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;

    transition: opacity 0.3s ease;
}

/* Delikatny efekt po najechaniu */

@media (hover: hover) {
    .em-portfolio-page .em-portfolio-photo a:hover img {
        opacity: 0.88;
    }
}

/* TABLET */

@media (max-width: 1024px) {

    .em-portfolio-page .em-portfolio-gallery {
        columns: 2;
        column-gap: 14px;
    }

    .em-portfolio-page .em-portfolio-photo {
        margin-bottom: 14px;
    }

    .em-portfolio-page .em-portfolio-section {
        padding: 65px 20px 80px;
    }

}

/* TELEFON */

@media (max-width: 640px) {

    .em-portfolio-page .em-portfolio-gallery {
        columns: 1;
    }

    .em-portfolio-page .em-portfolio-photo {
        margin-bottom: 12px;
    }

    .em-portfolio-page .em-portfolio-section {
        padding: 40px 16px 60px;
    }

}