/*
  Codice html a cui applicare gli stili.

  <div class="containerLinkSocial">
    <a href="https://www.facebook.com/profile.php?id=100057350654168" target="_blank" rel="noopener noreferrer" class="fb" aria-label="Ulteriori informazioni su Facebook. Attenzione! Il link viene aperto in una nuova finestra" tabindex="0">
      <div class="facebook">
        <img src="../Immagini/Icone/Social_Facebook1.png" alt="" />
      </div>
    </a>

    <a href="https://www.instagram.com/ltc.scuola?igsh=cWNrcGQ4a2loM28z" target="_blank" rel="noopener noreferrer" class="instagram" aria-label="Ulteriori informazioni su Instagram. Attenzione! Il link viene aperto in una nuova finestra" tabindex="0">
      <div class="instagram">
        <img src="../Immagini/Icone/Social_Instagram.png" alt="" />
      </div>
    </a>
  </div>
*/

.containerLinkSocial{
  font-size: 1rem;
  display: flex;
  justify-content: center;
  /* gap: .5rem; */
  gap: .5em;
}

/* .containerLinkSocial > a{
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.containerLinkSocial > a > div{
  height: 2.5rem;
  width: 2.5rem;
  border-radius: .3rem;
  background-color: var(--socialBackground);
  overflow: hidden;
  transition-property: background-color;
  transition-duration: .8s;
  transition-timing-function: ease;
}

.containerLinkSocial > a:hover > div{
  background-color: var(--socialHover);
  box-shadow: 0 0 1.3rem var(--socialHover);
}

.containerLinkSocial img{
  width: 100%;
  height: 100%;
} */

.containerLinkSocial > a{
  width: 3.2em;
  height: 3.2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.containerLinkSocial > a > div{
  height: 2.5em;
  width: 2.5em;
  border-radius: .3em;
  background-color: var(--socialBackground);
  overflow: hidden;
  transition-property: background-color;
  transition-duration: .8s;
  transition-timing-function: ease;
}

.containerLinkSocial > a:hover > div{
  background-color: var(--socialHover);
  box-shadow: 0 0 1.3em var(--socialHover);
}

.containerLinkSocial img{
  width: 100%;
  height: 100%;
}

/* ======================================================== */
/* ================ Footer quattro social. ================ */
/* ======================================================== */

/*
  Codice html a cui applicare gli stili.

  <div class="containerLinkQuattroSocial">
      <a href="https://www.facebook.com/p/Teatro-Comunale-di-Cambiano-100063674075128/" target="_blank" rel="noopener noreferrer" aria-label="Ulteriori informazioni sulla stagione teatrale su Facebook. Attenzione! Il link viene aperto in una nuova finestra" tabindex="0">
        <div>Teatro</div>
        <div>
          <img src="./Immagini/Icone/Social_Facebook1.png" alt="" />
        </div>
      </a>

      <a href="https://www.instagram.com/teatrocomunaledicambiano/" target="_blank" rel="noopener noreferrer" aria-label="Ulteriori informazioni sulla stagione teatrale su Instagram. Attenzione! Il link viene aperto in una nuova finestra" tabindex="0">
        <div>Teatro</div>
        <div>
          <img src="./Immagini/Icone/Social_Instagram.png" alt="" />
        </div>
      </a>

      <a href="https://www.facebook.com/profile.php?id=100057350654168" target="_blank" rel="noopener noreferrer" aria-label="Ulteriori informazioni sui corsi su Facebook. Attenzione! Il link viene aperto in una nuova finestra" tabindex="0">
        <div>Scuola</div>
        <div>
          <img src="./Immagini/Icone/Social_Facebook1.png" alt="" />
        </div>
      </a>

      <a href="https://www.instagram.com/ltc.scuola?igsh=cWNrcGQ4a2loM28z" target="_blank" rel="noopener noreferrer" aria-label="Ulteriori informazioni sui corsi su Instagram. Attenzione! Il link viene aperto in una nuova finestra" tabindex="0">
        <div>Scuola</div>
        <div>
          <img src="./Immagini/Icone/Social_Instagram.png" alt="" />
        </div>
      </a>
    </div> <!-- Fine containerLinkQuattroSocial. -->
*/

.containerLinkQuattroSocial{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: .5rem;
}

.containerLinkQuattroSocial a{
  text-decoration: none;
  color: #fff;
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: -.2rem -.2rem 1rem rgba(255, 255, 255, .1), .2rem .2rem .2rem rgba(0, 0, 0, .6);
}

.containerLinkQuattroSocial a div:first-child{
  font-size: .75rem;
  text-align: center;
}

.containerLinkQuattroSocial a div:last-child{
  width: 1.5rem;
  height: 1.5rem;
  margin: auto;
  background-color: var(--socialBackground);
  border-radius: .3rem;
  box-shadow: none;
  transition-duration: .5s;
  transition-property: box-shadow, background-color;
  transition-timing-function: ease;
}

.containerLinkQuattroSocial a:hover div:last-child{
  background-color: var(--socialHover);
  box-shadow: 0 0 1rem var(--socialHover);
}

.containerLinkQuattroSocial img{
  height: 100%;
}

/* ================= Query string. ================= */

@media only screen and (max-width: 500px){
  footer > .containerLinkQuattroSocial{
    display: flex;
    justify-content: center;
    gap: 0.5rem;
  }
}