.paragraph--socials .paragraph-content {
  padding-top: clamp(var(--spacing--4), 4vw, var(--spacing--6));
  padding-bottom: clamp(var(--spacing--5), 6vw, var(--spacing--6));
}
@media (max-width: 991px) {
  .paragraph--socials .container {
    padding-inline: var(--spacing--3);
  }
}
.paragraph--socials .content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--4);
}
.paragraph--socials .content > h2 {
  text-align: center;
  font-size: var(--typography--font-size--h3);
  font-weight: 600;
}
.paragraph--socials .content > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.3rem, 1fr));
  gap: clamp(var(--spacing--3), 4vw, var(--spacing--4));
  list-style-type: none;
  justify-content: center;
  padding: 0;
  margin: 0;
}
@media (min-width: 992px) {
  .paragraph--socials .content > ul:has(li:only-child) {
    grid-template-columns: 50%;
  }
}
@media (min-width: 992px) {
  .paragraph--socials .content > ul > li:nth-child(3n+1) {
    grid-column: 1;
  }
}
@media (max-width: 991px) {
  .paragraph--socials .content > ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .paragraph--socials .content > ul {
    grid-template-columns: 1fr;
  }
}

li.social-cell a {
  height: 100%;
  border: 1px solid var(--c--primary);
  border-radius: var(--radius--3);
  padding: var(--spacing--3);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  row-gap: var(--spacing--1);
  column-gap: var(--spacing--2);
  text-decoration: none;
  transition: 0.45s ease border-color, 0.45s ease background-color;
}
li.social-cell a > span {
  grid-row-start: 1;
  grid-row-end: 5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
li.social-cell a > span .btn-icon {
  background-color: var(--c--primary);
  border-color: var(--c--primary);
  --btn-height: clamp(6rem, 6vw, 9rem);
  color: var(--c--white);
  font-size: calc(var(--btn-height) * 0.35);
}
li.social-cell a h4 {
  font-size: var(--typography--font-size--lg);
  font-weight: 600;
  grid-column-start: 2;
  grid-row: 2;
  transition: 0.45s ease color;
}
li.social-cell a h3 {
  font-size: var(--typography--font-size--md);
  font-weight: 400;
  grid-column-start: 2;
  grid-row: 3;
  transition: 0.45s ease color;
}
li.social-cell a:hover, li.social-cell a:active {
  border-color: var(--button--primary-hover);
}
li.social-cell a:hover span i, li.social-cell a:active span i {
  --btn-hover-bg: var(--button--primary-hover);
  --btn-hover-border: var(--button--primary-hover);
  background-color: var(--btn-hover-bg);
  color: var(--c--white);
  border-color: var(--btn-hover-border);
}
li.social-cell a:hover h4, li.social-cell a:hover h3, li.social-cell a:active h4, li.social-cell a:active h3 {
  color: var(--button--primary-hover);
}
/*# sourceMappingURL=paragraph--socials.css.map */