body {
	font-family: Sans-Serif;
}

img{
	width:100%;
}
.gallery {
    display: grid; /* set main container as grid */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* set how grid's columns will look like */
    /* repeat(y, something) writes "something" "y" times */
    /* grid-template-columns: repeat(4, 1fr); is same as grid-template-columns: 1fr 1fr 1fr 1fr; (this means "grid has 4 columns, each column has a size of one fraction - 25%")*/
    /* grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));  make as many columns as possible if their size is between 400px to 1fr; they will be equally wide */
    gap: 1em; /* space between elements */
}

.gallery-item {
    display: block;
    margin: 0;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

.gallery-item .obal {
	overflow: hidden;
}
.gallery-item img {
    display: block;
    transition: all 3s; /* 0.3s long transition on hover and after hover*/
	cursor: pointer;
}

.gallery-item img:hover { /* hover zoom-in transition */
	transform: scale(1.2);
}

figcaption{
    font-size: 1.1em;
    padding: 0.5rem;
    background-color: #cd1755;
    color: #ffffff;
}

main {
    max-width: 1000px; /* nastavíme šířku, aby byla do 1000px; ne víc, 
	ale jen méně, tzn. 100% viewportu */
	/* maximalni povolena sirka bude 1000px, vice nez 1000px nastat nemuze, ovsem 
	mene nez 1000px klidne muze */
	/* šířka se nastaví maximálně na 1000px, ale když se viewport zmenší, tak tato šířka může být i menší, aby se vše do viewportu vlezlo */
    margin: auto;
}