/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/modules/socials/style.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
.cbp-socials {
  padding-block-start: 4.8rem;
  padding-block-end: 6rem;
  background-color: var(--color-container);
  --color-social-icons: var(--color-on-container);
  --color-social-icons-hover: var(--color-on-container-hover);
}
.cbp-socials .cbp-socials__inner {
  max-width: var(--width-content);
  margin-inline: auto;
  display: flex;
  gap: 5.3rem;
}
@media only screen and (max-width: 767px) {
  .cbp-socials .cbp-socials__inner {
    flex-direction: column;
  }
}
@media only screen and (max-width: 1024px) {
  .cbp-socials .cbp-socials__inner {
    margin-inline: var(--gutter-mobile);
  }
}
.cbp-socials .cbp-socials__inner .cbp-container {
  flex-basis: 30%;
}
@media only screen and (max-width: 767px) {
  .cbp-socials .cbp-socials__inner .cbp-container {
    flex-basis: 100%;
  }
}
.cbp-socials .cbp-socials__inner .cbp-social-icons {
  flex-basis: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13rem;
  list-style-type: none;
  padding: 0;
}
@media only screen and (max-width: 767px) {
  .cbp-socials .cbp-socials__inner .cbp-social-icons {
    flex-basis: 100%;
    gap: 5rem;
  }
}
.cbp-socials .cbp-socials__inner .cbp-social-icons a svg {
  fill: var(--color-social-icons);
}
.cbp-socials .cbp-socials__inner .cbp-social-icons a:hover svg {
  fill: var(--color-social-icons-hover);
}

/*# sourceMappingURL=style-index.css.map*/