/* Social links (footer of the home page and inner pages). */

.socials {
  display: flex;
  gap: 10px;
}

.socials a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #00000029;
  color: #ffffffd9;
}

.socials a:hover {
  color: #394145;
  background: #fff;
}

.socials svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 700px) {
  .socials {
    display: grid;
    grid-template-columns: repeat(2, 26px);
    gap: 6px;
  }

  .socials a {
    width: 26px;
    height: 26px;
  }

  .socials svg {
    width: 13px;
    height: 13px;
  }
}