.chleb-tile {
	cursor: pointer;
	overflow: hidden;
 	transition: transform 0.2s ease-in-out;
  }
  .chleb-tile:hover {
	transform: scale(1.02);
  }
  .modal-content {
	max-width: 700px;
	margin: auto;
  }
  .modal {
    z-index: 1000000;
}

.modal-content {
    max-width: 90vw !important;
 }
  .chleb-detail-box {
	background: white;
 	padding: 2rem;
   }
  .caption {
	position: absolute;
	bottom: 10px;
	left: 10px;
 	color: white;
	padding: 4px 8px; 
   }
  .chleb-tile {
	position: relative;
	overflow: hidden;
	cursor: pointer;
   }

  .heightbanerka {
    height: 50vh;
}
.heightbanerka:hover .gtryscaclechleb{
	filter: grayscale(0);
}

.gtryscaclechleb{
	filter: grayscale(1);
	transition: 0.3s;
}
.nakladkagradient{
	width: 100%;
	height: 100%;
	background: #000;
background: linear-gradient(41deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 83%);
}
.maxw {
	max-width: 1100px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
  }
  .custom-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* lub większy jeśli chcesz więcej paddingu */
    height: 40px;
    border-radius: 50%;
    font-size: 18px; /* opcjonalnie zwiększ ikonę */
}

@media (min-width: 1400px) {
	.modal-xl {
	  max-width: 1100px !important;
	}
  }

  @media screen and (max-width: 911px){
	.modalheight{
		height: 150px !important;
	}
  }