@charset "utf-8";
/* CSS Document */

/* A formatação abaixo é aplicada somente aos conteúdos da página Home (seção main)*/

/* --- Formatação para telas de todos os tamanhos --- */
    .active-home{
      color: #fff;
      background: rgb(247,12,91);
      transition: .7s;
    }

	main{
		grid-row-gap: 10px; 
		grid-template-columns: (4,1fr);
		grid-template-rows: 340px 340px 340px 340px 340px;
	}

	section{
		grid-row-gap: 10px;
	}

	section h1{
		max-width: 317px;
		margin-bottom: 15px;
		font-family: 'rbt-thin';
		font-size: 2.0em;
		color: rgb(179,179,179);
		text-transform: uppercase;
		border-bottom: 1px solid rgb(179,179,179); 
	}

	section a{
		font-family: 'rbt-light';
		font-size: 1.8em;
		color: rgb(41,171,226);
		line-height: 0px;
		max-width: 230px;
	}

	section a .span1{
		float: left;
		width: 30px;
		height: 30px;
		display: block;
		background: rgb(41,171,226);
		background-image: url('../imgs/link-categ.png');
		background-position: -1px -27px;
		margin: -16px 15px 0 0;
		border-radius: 30px;
		transition: .3s;
	}

	section a:hover .span1{
		background-position: -1px 0px;
		transition: .3s;
	}

	section a .span3{
		background: blue;
	}

	section div{
		/*grid-column: 1/2;*/
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr;
		grid-column-gap: 30px;
		place-self: center;
	    /*justify-content: space-around;*/
	}

	figcaption{
		font-family: 'prestige';
		font-size: 1.8em;
		text-align: center;
	}

	.sec1 figcaption{
		color: rgb(241,90,36);
	}

	.sec2 figcaption{
		color: rgb(140,198,93);
	}

	.sec3 figcaption{
		color: rgb(251,176,59);
	}

	.sec4 figcaption{
		color: rgb(41,171,226);
	}

	.sec5 figcaption{
		color: rgb(128,128,128);
	}

	.sec6 figcaption{
		color: rgb(241,90,36);
	}

	main picture{
		ibackground: lightgreen;
	}

/* --- Formatação para telas de tamanhos especificados nos comentários abaixo --- */

	@media (max-width: 790px){

		section div{
			/*grid-column: 1/2;*/
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 1fr;
			grid-column-gap: 30px;
			place-self: center;
		    /*justify-content: space-around;*/
		}
	      
		section div picture:nth-child(4){
			display: none;
		}
		
	}


	@media (max-width: 560px){

		section div{
			/*grid-column: 1/2;*/
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr;
			grid-column-gap: 30px;
			place-self: center;
		}
	      
		section div picture:nth-child(3),
		section div picture:nth-child(4){
			display: none;
		}

	}


	@media (max-width: 360px){

		section h1{
			font-size: 1.5em;
			text-align: center;
		}

		section div{
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: 1fr;
			place-self: center;
		}
	      
		section div picture:nth-child(2),
		section div picture:nth-child(3),
		section div picture:nth-child(4){
			display: none;
		}

	}