.random {
            display: flex;
    align-items: center;
    margin: -2px 0 10px 0;
    width: 100%;
    /*background: #f49b00;
    border-radius: 8px;
    height: 42px;*/
        }

        .textstatic {
        	flex: 1;
    font-weight: 300;
    color: #ffffff;
    font-size: 100%;
    }


	.button-random-gallery {
		width: 100%;
	}
        .button-random-gallery button {
                font-family: "Sarabun", serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(82 82 82 / 28%);
    backdrop-filter: blur(8px) saturate(100%);
    border: none;
    color: #ffffff;
    font-weight: 400;
    cursor: pointer;
    padding: 0 3vh;
    font-size: clamp(0.1rem, calc(0.5rem + 1vw), 17px);
    border-radius: 8px 8px 0 0;
    width: 100%;
    height: 40px;
}

.button-random-gallery button:hover {
    text-decoration: none;
    background: #484848cc;
}

.button-random-gallery img {
	margin-right: 10px;
	margin-left: -20px;
    margin-top: 3px;
    height: 90%;
}



@media (max-width: 800px) {
	.button-random-gallery button:hover {
    background: linear-gradient(-45deg, #242424cc, #242424cc, #242424cc, #242424cc);
  }
}

@media (max-width: 380px) {
	.button-random-gallery button {
    font-size: 12px;
  }
  .button-random-gallery img {
  		height: 60%;	
  }
}

@media (max-width: 350px) {
	.button-random-gallery button {
    font-size: 11px;
  }
  .button-random-gallery img {
  		height: 60%;	
  }
}

@media (max-width: 332px) {
	.button-random-gallery button {
    font-size: 10px;
  }
  .button-random-gallery img {
  		height: 60%;	
  }
}

@media (max-width: 315px) {
	.button-random-gallery button {
    font-size: 11px;
  }
  .button-random-gallery img {
  		display: none;	
  }
}

@media (max-width: 215px) {
	.button-random-gallery button {
    font-size: 9px;
  }
}




        

        .sort-buttons {
            text-align: left;
            margin: 0;
            font-family: "Kanit", sans-serif;
    		font-weight: 300;
    		font-style: normal;
        }

  .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            grid-template-rows: repeat(2, 1fr);
            gap: 10px;
            justify-content: center;
        }
 @media (max-width: 1000px) {
            .gallery {
            	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(2, 1fr);
            }
        }

        .gallery img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            aspect-ratio: 1 / 1;
            cursor: pointer;
        }
  
/* Ustawienie początkowej przezroczystości obrazów */
.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Powolne przejście do pełnej widoczności */
}

/* Ustawienie pełnej widoczności po załadowaniu obrazu */
.fade-in.visible {
    opacity: 1;
}