@import "vars.css";
@import "fonts.css";
@import "header.css";
@import "footer.css";
@import "breadcrumb.css";
@import "patchwork.css";
@import "teaser.css";
@import "menus.css";
@import "utils.css";
@import "filters.css";
@import "banner.css";
@import "layout.css";
@import "blocks.css";
@import "grid.css";


.color-yellow{
    background-color: var(--color-yellow);
}

.color-orange{
    background-color: var(--color-orange);
}
.color-red{
    background-color: var(--color-red); 
}
.color-green{
    background-color: var(--color-green);
}
.color-pink{
    background-color: var(--color-pink);
}
.color-gray{
    background-color: var(--color-gray);
}
.color-white{
    background-color: var(--color-white);
}
.color-blue{
    background-color: var(--color-blue);
}
.color-skin{
	background-color: var(--color-skin);
}



body {
  font-family: var(--font-regular);
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
  background-color: var(--color-gray);
  padding: 0;
 
  margin: 0 auto;
}

img{
  display: block;
  width: 100%;
  height: auto;
}

p, ul, ol{
	margin: 0 0 1rem 0;
}

.patchwork__row img{
	width: 100%;
	object-fit: cover;
	height: revert-layer;
}

.layout-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

.messages__wrapper {
  margin: 1rem 0;
}


a{
	color: var(--color-text);
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}


h1, h2, h3{
    font-family: var(--font-accent);
	margin: 0 0 1rem 0;
}

h1{
  font-size: var(--font-size-xxxx-large);
}



h2 a{
    text-decoration: none;
}


h2 a:hover{
    text-decoration: underline;
}