:root{
	--red-color: #EE1526;
	--blue-color: #019ADE;
	--orange-color: #E89001;
	--green-color: #00A296;
	--rosy-color: #E28C9A;
	--purple-color: #887BCB;
	--darkblue-color: #283583;
	--yellow-color: #FFE500;
	
	
	--font-family: 'TTNorms-Regular';
	--font-family-bold: 'TTNorms-Bold';
	--font-family-medium: 'TTNorms-Medium';
	--font-family-special: 'PP Neue Machina Inktrap Smbold';
	--font-color: #000000;
	--section-padding: 90px 0;
	--text-h1-size: 4.2rem;
	--text-h2-size: 3.5rem;
	--text-h3-size: 2.5rem;
	--text-h4-size: 1.5rem;
}


* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box
}

html {
	color: #000;
	font-size: 62.5%;
	line-height: 1.4;
}

body {
	font-family: var(--font-family);
	line-height: 1.5;
	font-size: 1.7rem;
	color: var(--font-color);
	font-weight: 400;
}

b, strong{
	font-weight: normal;
	font-family: var(--font-family-bold);
}

.modal__grid {  display: grid;
	grid-template-columns: 1.5fr 1fr;
  grid-gap: 3rem;
  grid-auto-flow: row;
  grid-template-areas:
	"header header"
	"image1 content"
	"gallery content";
	
}
.header { grid-area: header; }
.image1 { grid-area: image1; }
.gallery { grid-area: gallery; }
.content { grid-area: content; }

h1, h2{
	font-family: var(--font-family-special);
	font-weight: normal;
}

h1 small{
	
	font-family: var(--font-family-medium);
}
h2 small{
	font-family: var(--font-family-special);
	font-weight: normal;
}
.modal__grid, .content{
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem;
}


.news{
	margin-bottom: 4rem;
	padding-bottom: 4rem;
	border-bottom: 1px solid #dadada;
}

.modal__grid p a, .content p a{
	
	color: var(--font-color);
}
.modal__grid .image1 img,
.modal__grid .gallery img{
	width: 100%; height: auto;
	display: block;
}

.modal__grid .image1 div,
.modal__grid .gallery div{
	margin-bottom: 2rem;
}

.modal__grid .header{
	padding: 10rem 8rem 0 8rem;
	position: relative;
}

.modal__grid .header .icon{
	position: absolute;
	top: 0;
	left: 0;
}
.modal__grid .header .icon img{
	width: 32px;
	height: auto;
	display: block;
}
.modal__grid .header .header__inner{
	max-width: 400px;
}

.modal__grid .header h1 small, h2 small{
	display: block;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1.2rem;
}
.modal__grid .content{
	margin-top: -10rem;
}


@media(max-width: 1100px){
	.modal__grid .header{
		padding: 8rem 4rem 0 4rem;
	}
}


@media(max-width: 900px){
	.modal__grid .content{
		margin-top: 0;
	}
	.modal__grid {  display: grid;
	  grid-template-columns: 1fr;
	  grid-gap: 4rem;
	  grid-auto-flow: row;
	  grid-template-areas:
		"header"
		"image1"
		"content"
		"gallery";
		
	}
}