/*-------------------*/
/*-------------------*/
/* x4 SERVICES block*/
/*-------------------*/
/*-------------------*/



/*BG 4TASKS*/
.grid-service svg{
    color: var(--clr-light);
}
.grid-service {
    color: var(--clr-dark);
}
.grid-service h1 {
    color: var(--clr-neutral);
    margin-top: 2rem;
}
/*BG REVERT SPECIFIED 4TASKS*/
section.bg-revert .grid-service svg{
    color: var(--clr-primary);
}

section.bg-revert  .grid-service {
    color: var(--clr-dark);
}
section.bg-revert  .grid-service h1 {
    color: var(--clr-primary);
}
section.bg-revert .grid-service .img:hover{
    color: var(--clr-secondary);
}

.service{
    text-align: center;
    margin-bottom: 2rem;
}
.service .img{
    font-size: 8rem;
}
.service h1{
    font-size: 2rem;
    font-weight: bolder;
}

@media (min-width:1024px){
    .service{text-align: left;}
    .service .img {margin-right: 2rem;}
}
@media (min-width:1280px){
    .service{text-align: center;}
    .service .img {margin-right: 0rem;}
}



/*-------------------*/
/*-------------------*/
/*grid service*/
/*-------------------*/
/*-------------------*/
.grid-service{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap:2rem;
}
/*Chaque items de la grille se comporterons en block FLEX pour pouvoir orienter le contenu sur un flux horizontal et vertical celon les affichages*/
.grid-service > *{
    display: flex;
    flex-direction: column;
}
/*pour les affichages plus grand que 768px (attention, en ecriture on defini la taille minimum)*/
/*en mathematique, nous pourrions faire : affichage > ou egal à 768  si ca peut vous aider */
@media (min-width:768px){
    /*on defini une grille de deux colonne egales*/
    .grid-service{grid-template-columns: repeat(2, 1fr);}
    /*on change la direction. plus assez de place pour afficher le texte a coté du picto, on le met en dessous*/
    .grid-service > *{flex-direction: column;}
}
@media (min-width:1024px){
    .grid-service{grid-template-columns: repeat(2, 1fr);} 
    /*on reste sur deux colonnes. Mais nous avons plus de largeur, alors nous pouvons placer le texte a coté du picto en REchangeant la direction*/
    .grid-service > *{flex-direction: row;}
}
@media (min-width:1280px){
    /*on passe sur une grille de 4 colonnes egales*/
    .grid-service{grid-template-columns: repeat(4, 1fr);}
    /*re belotte, on change de sens*/
    .grid-service > *{flex-direction: column;}
}