@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-prod{
      color: #fff;
      background: rgb(247,12,91);
      transition: .7s;
    }

	section h1{
		max-width: 324px;
		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 div{
		/*grid-column: 1/2;*/
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 30px;
		place-self: center;
	    /*justify-content: space-around;*/
	}

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

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

	.sec1 figcaption.txt-rotas{
		color: rgb(140,198,93);
	}

	.sec1 figcaption.txt-proibicoes{
		color: rgb(251,176,59);
	}

	.sec1 figcaption.txt-pavimentacao{
		color: rgb(41,171,226);
	}

	.sec1 figcaption.txt-diversas{
		color: rgb(128,128,128);
	}

	.sec1 figcaption.txt-complementares{
		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;
		}

	}