colorText = #6f6d6d

back(size)
	background-color #f1f1f1
	box-shadow 4px 5px 10px rgba(0, 0, 0, 0.4)
	padding: size + "%"
	margin 0 0 1% 0

html
	color colorText

nav
	back(0)
	text-align right

	& a
		display inline-block
		padding 1%
		color colorText
		text-decoration: none
				
		&:hover
		&.active
			background-color #f87777
			color #f8f8f8     

div.images
	display grid
	grid-template-columns repeat(5, 1fr)
	grid-gap 0.5%
	back(1)
	 
	& img
		width: 100%
	@media (max-width: 600px)
		grid-template-rows repeat(5, 1fr)
		grid-template-columns 1fr
		& img
			width  80%
			margin auto
article
	width 80%
	margin auto
	display grid
	grid-template-columns repeat(3, 1fr)
	grid-gap 4%
	@media (max-width: 600px)
		grid-template-rows repeat(3, 1fr)
		grid-template-columns 1fr
	& section
		display grid
		grid-template-columns 1fr 2fr
		grid-gap 2%
		align-items center
		back(2)
		
		& h3
			grid-column 1/3
			margin 0
			text-align center

		& img
			width: 100%


footer
	background-color colorText
	color white
	@media (max-width: 600px)
		margin 3vh 0
	& h4 
			padding:10px

.big
	width 50vw
	@media (max-width: 600px)
		width 100vw

section
	display grid
	grid-template-columns 1fr 1fr 

	@media (max-width: 600px)
		grid-template-columns 1fr