main.css

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {background-color:#FCFAF3;font-family: Helvetica, Arial, sans-serif;}
    
/* Agata Kluzniak: */
#z{
    color: #B45F2E;}

#header>span{color:#322522}

#header{grid-area: header; 
        font-size: 40px;
        margin-top: 20%;
		padding: 0;
		padding-bottom: 15%;
        
}

#menu{
    -ms-grid-area: menu;
    grid-area: menu;
	margin-top: 20%;
	padding: 0;
	padding-bottom: 15%;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2%;
    grid-template-areas: 
    "about  works contact"
}
#menu>div>ul{padding-left: 0; 
            margin-left: 0;
            margin-bottom: 0;
            padding-bottom: 0}

#menu>div>ul>li{list-style: none; 
    }
#menu ul a {
    display:block;
    text-decoration:none;
    padding-bottom: 1em;
    padding-left: 0;
    margin: 0;
    font-size: 16px;
    color: #3C3933
		
}

.dropdown {
/*    position: relative;*/
	font-size: 16px;
    color: #322522;
    display: inline-block;
	
/*
    align-self: end;
    justify-self: end;
*/
}
div>ul>li>a>span{
	display:inline-block;
	color: #B45F2E;
	}



.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    z-index: 1;
}


.dropdown-content a {
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {color: #B45F2E}

.dropdown:hover .dropdown-content {
    display: block;
}


#about{grid-area: about; }
#works{grid-area: works; }
#contact{grid-area: contact; }



#main{grid-area: main;
    text-align: center;
/*     border: 1px solid #BEBABA; */
    color: #322522;
    }
 .images_show{
	 	margin:0;
	 	padding:0}

/*
#main .caption{font-size: 14px;
				padding-bottom: 1.7em}
*/

.text{max-width: 55%;
	font-size: 13px;
    float:right;
    text-align:justify;
    line-height: 1.7em;
    margin: 0;
	margin-right: 1.7em;
    padding: 1.7em;
	padding-left: 0}



#footer{grid-area: footer; 
		padding-top:1.7em}

#wrapper{display:grid; 
	
         width: 70%; height: auto; 
         margin: auto;
         grid-template-columns: 1fr 1fr;
         grid-template-rows:minmax(170px, auto)  minmax(auto, auto) 1fr;
         grid-gap: 2%;
    
    grid-template-areas: 
    "header  menu"
    "main    main"
    "footer  footer"
                    }
img{max-width: 100%;
    padding:1.7em;
	margin:0 }

.caption{font-size: 14px; 
		margin: 0;
		padding-bottom: 1.7em}

.slideshow{
  width:100%;
  margin:0 auto;
  position: relative;
  display: block;
  overflow: hidden;
}

figure{
  position: absolute;
  opacity: 0;
  transition: 0s opacity;}

    figure.show{
        margin: 0;
  opacity: 1;
  position: static;
  transition: 1s opacity;
}

.next, .prev{
  color: #fff;
  position: absolute;
  background: rgba(0,0,0, .6);
  top: 50%;
  z-index: 1;
  font-size: 2em;
  margin-top: -.75em;
  opacity: .3;
  user-select: none;
}
.next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}
.next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}


@media (max-width: 1200px) {
	
	
    #header{
		grid-area: header; 
        margin: 0;
        padding: 0;
		padding-bottom: 10%;
		padding-top: 5%;
        font-size: 36px;
    }
    
	#menu{
		grid-area: menu;
		padding: 0;
		margin: 0;
	}
	
        .dropdown span{
		font-size: 14px;
        margin: 0;
        }
     #menu ul a {font-size: 14px}
	
     #main{grid-area: main;
		   text-align: center;
           margin: 0;
           padding: 0;
            }
	.image{max-width: 100%;
			padding-top:1em}
	
    .text {min-width: 100%;
            font-size: 13px;
            clear:right;
			margin-right: 0;
			margin-left: 0;
		padding-left: 1.7em;
        }
	
	#main .caption{font-size: 14px}
	
	#footer{grid-area: footer}
	
	#wrapper{display:grid; 
	width: 90%; height: auto;
	margin: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(80px, auto) minmax(40px, auto) 2fr 1fr;
    grid-gap: 2%;
    grid-template-areas: 
    "menu     menu"
    "header   header"
    "main     main"
    "footer   footer"
         }
	
    .next, .prev{
        margin:0;
        padding: 0;
  		color: #fff;
  		position: absolute;
  		background: rgba(0,0,0, .6);
  		top: 50%;
  		z-index: 1;
  		font-size: 1em;
  		opacity: .3;
  		user-select: none;
}
.next:hover, .prev:hover{
  cursor: pointer;
  opacity: 1;
}
.next{
  right: 0;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

}