/* styly pro oddíly */
h2 strong{
	color: #1b9ae4;
}
.paragraph{
	padding: 50px 0px;
}
.paragraph--type--dva-sloupce{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.paragraph--type--dva-sloupce > div{
	width: calc(50% - 25px);
}
.paragraph--type--obrazek-a-text,
.paragraph--type--text-a-obrazek{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.paragraph--type--obrazek-a-text .field--name-field-obrazek,
.paragraph--type--text-a-obrazek .field--name-field-obrazek{
	width: calc(33.33% - 25px);
}
.paragraph--type--obrazek-a-text .field--name-field-text-vpravo,
.paragraph--type--text-a-obrazek .field--name-field-text-vlevo{
	width: calc(66.66% - 25px);
}
/* masonry styles */
.paragraph--type--galerie .field--name-field-gallery-images img{
	width: 100%;
	height: auto;
}
.paragraph--type--galerie .field--name-field-gallery-images{
	--masonry-columns: 2;
	--masonry-gap: 1rem;
}
@media (min-width: 768px) {
.paragraph--type--galerie .field--name-field-gallery-images{
		--masonry-columns: 3;
		--masonry-gap: 1rem;
	}
}
@media (min-width: 1024px) {
.paragraph--type--galerie .field--name-field-gallery-images{
		--masonry-columns: 4;
		--masonry-gap: 2rem;
	}
}
/* load only if grid-template-rows: masonry is supported by the browser else use the fallback */
@supports (grid-template-rows: masonry) {
.paragraph--type--galerie .field--name-field-gallery-images{
		display: grid;
		grid-template-columns: repeat(var(--masonry-columns), 1fr);
		grid-gap: var(--masonry-gap);
		grid-template-rows: masonry;
	}

.paragraph--type--galerie .field--name-field-gallery-images > * {
		margin-bottom: 0;
	}
}
/* fallback */
.paragraph--type--galerie .field--name-field-gallery-images{
	column-count: var(--masonry-columns);
	column-gap: var(--masonry-gap);
}
.paragraph--type--galerie .field--name-field-gallery-images > * {
	margin-bottom: var(--masonry-gap);
	break-inside: avoid;
}
form{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
form > *{
	width: 100%;
}
form > .form-item-name,
form > .form-item-email{
  width: calc(50% - 25px);	
}	
form .form-item input{
	width: 100%;
	box-sizing: border-box;
}
@media screen and (max-width: 479px){
	.paragraph--type--dva-sloupce > div{width: 100%;}
  .paragraph--type--text-a-obrazek{gap: 30px;}
  .paragraph--type--obrazek-a-text .field--name-field-obrazek, .paragraph--type--text-a-obrazek .field--name-field-obrazek{width: 100%; order: 1;}
  .paragraph--type--obrazek-a-text .field--name-field-text-vpravo, .paragraph--type--text-a-obrazek .field--name-field-text-vlevo{width: 100%; order: 2;}
  form > .form-item-name, form > .form-item-email{width: 100%;}	
}