body {

    font-family: Arial, sans-serif;

    margin: 0;

    padding: 20px;

    background-color: #f0f0f0;

}



.gallery {

    display: grid;

    gap: 10px; /* A képek közötti távolság */

    grid-template-columns: repeat(4, 1fr); /* Három oszlop, minden oszlop egyenlő szélességű */

    max-width: 100%; /* Az oldal teljes szélességét kihasználja */

    margin: 0 auto; /* Középre igazítás */

}



/* Alapértelmezett stílus a galéria elemekhez */

.gallery-item {
    position: relative;
    padding-bottom: 133.33%; /* Régi böngészők támogatása */
    aspect-ratio: 3 / 4; /* Modern böngészők számára */
    overflow: hidden;
    border: 5px solid #FFFFFF;
    border-radius: 35px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.2s ease-in-out;
}


/* Kép stílusok */

.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* A kép a keretben marad, torzítás nélkül */
    object-position: center; /* Középre igazítás */
    background-color: #fff; /* Opcionális háttérszín, ha a kép aránya eltér */
    transition: transform 0.2s ease-in-out;
}

/* Első oldal - podcast */

.page1 .gallery-item {

    border-color: #E16539;

box-shadow: 0 4px 8px rgba(225, 101, 57, 0.5); /* Egyedi árnyék */

}



.page1 .gallery-item:hover {

    box-shadow: 0 4px 8px 12px rgba(225, 101, 57, 0.7); /* Intenzívebb árnyék hover állapotban */

}



/* Második oldal - streamdaralo */

.page2 .gallery-item {

    border-color: #CDCCC9;

box-shadow: 0 4px 8px rgba(205, 204, 201, 1); /* Egyedi árnyék */

}



.page2 .gallery-item:hover {

    box-shadow: 0 4px 8px 12px rgba(205, 204, 201, 1); /* Intenzívebb árnyék hover állapotban */

}



/* Harmadik oldal - egyszervolt */

.page3 .gallery-item {

    border-color: #B69260;

box-shadow: 0 4px 8px rgba(196, 0, 1, 1); /* Egyedi árnyék */

}



.page3 .gallery-item:hover {

    box-shadow: 0 4px 8px 12px  rgba(196, 0, 1, 1); /* Intenzívebb árnyék hover állapotban */

}



/* Negyedik oldal - bufe */

.page4 .gallery-item {

    border-color: #F0DFC8;



box-shadow: 0 4px 8px rgba(25, 25, 25, 1); /* Egyedi árnyék */

}



.page4 .gallery-item:hover {

    box-shadow: 0 4px 8px 12px rgba(25, 25, 25, 1); /* Intenzívebb árnyék hover állapotban */

}

/* Ötödik oldal - Insider */

.page5 .gallery-item {

    border-color: #CF9810;

box-shadow: 0 4px 8px rgba(240, 223, 200, 1); /* Egyedi árnyék */

}



.page5 .gallery-item:hover {

    box-shadow: 0 4px 8px 12px rgba(240, 223, 200, 1); /* Intenzívebb árnyék hover állapotban */

}



/* Hover állapot */

.gallery-item:hover {

    box-shadow: 0 4px 8px 16px rgba(0, 0, 0, 0.5);

}



.gallery-item img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.2s ease-in-out;

}



.gallery-item a {

    display: block;

    width: 100%;

    height: 100%;

}



/* Hover állapotban az árnyék kiemelése */

.gallery-item:hover {

    box-shadow: 0 4px 8px 16px rgba(0, 0, 0, 0.5); /* Intenzívebb árnyék a hover állapotban */

}



@media (max-width: 768px) { /* Mobil és tablet nézet */

    .gallery {

        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    }

}