#servizi-offerti{
  margin:2em 0;
}

#servizi-offerti a{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ddd;
  text-align: center;
  margin-bottom: 1em;
  font-size: 1.5em;
  font-weight: 600;
  padding: 1em;
  position: relative;
  color:#fff;
  background-image:
    linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)),
    var(--bg-image);
    background-size: 100% auto;
    transition: opacity 0.1s linear 0s;
    box-shadow: 3px 3px 5px #444;
}

#servizi-offerti a:hover, #servizi-offerti a:focus{
    opacity:0.9;
}
#link-siti {
  --bg-image: url('/wp-content/uploads/2026/05/bg-siti-web-landing-page.jpg');
}
#link-performance {
  --bg-image: url('/wp-content/uploads/2026/05/bg-web-performance.jpg');
}
#link-interventi {
  --bg-image: url('/wp-content/uploads/2026/05/bg-interventi-sito-web.jpg');
}
#link-consulenze {
  --bg-image: url('/wp-content/uploads/2026/05/bg-consulenze.jpg');
}
#link-automazioni {
  --bg-image: url('/wp-content/uploads/2026/05/bg-integrazioni.jpg');
}
#link-wordpress-gestionali {
  --bg-image: url('/wp-content/uploads/2026/05/bg-wordpress-gestionale.jpg');
}

/* #servizi-offerti a::before{
     content:"";
 position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; 
    background-color: rgba(0,0,0,0.7);
} */

#servizi-offerti a::after{
  content:"";
  padding-bottom: 75%;
 
}

@media screen and (min-width:479px){
  
  #servizi-offerti{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }
  
  
  #servizi-offerti a{
    margin-bottom: 0;
    font-size: 1.5em;
  }
}


@media screen and (min-width:767px){
  
  #servizi-offerti{
    grid-template-columns: 1fr 1fr 1fr;
  }

  #servizi-offerti a{
    line-height: 1.2em;
  }
  
}

@media screen and (min-width:981px){

    #servizi-offerti{
        gap:2em;
    }
    #servizi-offerti a{
    font-size: 2em;
  }
}