{"version":3,"sources":["social.css","social.scss"],"names":[],"mappings":"AAAA,uB,CCKE,a,CDFF,uB,CCKE,c,CAIF,oB,CAyDA,mB,CAxDC,e,CADD,8B,CAGE,U,CACA,W,CACA,iB,CACA,S,CACA,U,CACA,c,CACA,kB,CATF,qC,CAoTA,uC,CA7EA,wC,CA9KA,oC,CAiDA,qC,CA/FG,iB,CACA,O,CACA,Q,CACA,8B,CACA,S,CAfH,sC,CAkBG,iB,CACA,K,CACA,M,CACA,O,CACA,Q,CACA,iB,CACA,6E,CACA,S,CACA,uB,CACA,S,CA3BH,qC,CA8BG,iB,CACA,K,CACA,M,CACA,O,CACA,Q,CACA,iB,CACA,kF,CACA,U,CArCH,4C,CA0CG,S,CAGA,gC,CAEG,yB,CACA,sH,CAHH,iC,CAMG,yB,CACA,0H,CAKN,8B,CAGE,W,CACA,Y,CACA,e,CACA,kB,CACA,kB,CACA,iB,CACA,S,CATF,6B,CAgBE,iB,CACA,O,CACA,Q,CACA,8B,CACA,U,CACA,W,CACA,iB,CACA,U,CACA,c,CAEA,4B,CACA,yD,CACA,uB,CACA,S,CA7BF,6B,CAAA,oC,CAwCG,+B,CAxCH,8C,CAAA,mC,CA2CG,4B,CACA,8B,CAKH,oB,CACC,e,CACA,a,CACA,iB,CACA,e,CACC,kD,CAID,+D,CAHC,yB,CACE,mC,CAGH,yBAVD,oB,CAWE,qBAXF,0B,CAcI,iC,CAdJ,8B,CAiBE,U,CACA,W,CACA,iB,CACA,S,CACE,0B,CACF,c,CACA,kB,CACE,mD,CACF,uB,CAzBF,oC,CA2BG,U,CA3BH,wC,CAqCG,kF,CAGA,mC,CAEG,a,CACA,mC,CAHH,+B,CAMG,uB,CAOJ,yBDvCA,4D,CCwCC,SDrCH,+D,CCyCE,wB,CAIF,Q,CAQE,c,CAME,+B,CAdJ,Q,CACE,a,CAGA,a,CACA,qB,CAEA,0E,CAAA,kE,CALA,iB,CACA,S,CAKA,c,CACE,iB,CACA,U,CACA,W,CACA,Q,CACA,O,CAGF,gB,CAIA,gB,CAHE,4C,CACA,wB,CAEF,gB,CACE,6C,CArBJ,e,CA0BI,U,CACA,gB,CACA,a,CAEyE,YAAA,uE,MAAA,+D,GA9B7E,e,CAgCM,U,CACA,iB,CACA,Q,CACA,S,CACA,6E,CACA,gC,CACA,uB,CACA,O,CACA,W,CACA,Q,CACA,U,CACA,mC,CACA,uE,CAAA,+D,CA5CN,qB,CAgDQ,kB,AAIyE,gBAAA,uE,MAAA,+D,GApDjF,c,CAAA,6B,CAsDM,oCASN,uB,CACC,e,CACA,kB,CACA,iB,CACA,S,CACA,Y,CACC,qB,CANF,gC,CASI,sB,CATJ,mC,CAaE,Y,CACA,qB,CACA,0B,CACA,kB,CACA,gB,CACA,yBAlBF,mC,CAmBG,c,CACA,a,AAED,0BAtBF,mC,CAuBG,Y,CACA,gBAxBH,iC,CA4BE,U,CACA,W,CACA,iB,CACA,O,CACA,Q,CACA,8B,CACA,S,CACA,0B,CACA,c,CACA,oB,CAwCF,sC,CA7EA,uC,CAgDG,U,CAOD,0BDpEA,8D,CCqEC,W,CACA,WDlEH,yD,CCsEE,Q,CACA,Q,CDnEF,sD,CCwEC,U,CACA,Q,CAIA,0BDxEC,wD,CCyEA,sBAIF,sB,CACC,e,CACA,kB,CACA,iB,CACA,S,CAJD,6B,CAAA,8B,CAkBE,Y,CACA,iB,CAIA,U,CACA,+B,CACA,6E,CACA,U,CACA,mB,CA3BF,8B,CASE,S,CACA,U,CAFA,O,CARF,6B,CAoBE,K,CACA,Q,CACA,U,CAMA,0BA5BF,6B,CA6BG,sBA7BH,kC,CAiCE,e,CACA,0BAlCF,kC,CAmCG,Y,CACA,iB,CACA,Y,CACA,Q,CACA,6BAvCH,gC,CA2CE,U,CACA,W,CACA,iB,CACA,O,CACA,Q,CACA,8B,CACA,S,CACA,0B,CACA,c,CACA,uB","file":"../social.css","sourcesContent":["[class*=\"social__icon\"] a {\n  display: block; }\n\n[class*=\"social__icon\"] p {\n  margin-top: 3px; }\n\n.social__icon-circle {\n  margin-top: 40px; }\n  .social__icon-circle .brk-icon {\n    width: 95px;\n    height: 95px;\n    position: relative;\n    z-index: 1;\n    color: #fff;\n    font-size: 42px;\n    margin-bottom: 17px; }\n    .social__icon-circle .brk-icon:before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      z-index: 2; }\n    .social__icon-circle .brk-icon > .before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border-radius: 50%;\n      background: linear-gradient(45deg, var(--brk-base-2) 20%, var(--brk-base-5) 70%);\n      opacity: 0;\n      transition: all .4s ease;\n      z-index: 1; }\n    .social__icon-circle .brk-icon > .after {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border-radius: 50%;\n      background: linear-gradient(45deg, var(--brk-base-3) 20%, var(--brk-secondary-3) 70%);\n      z-index: -1; }\n  .social__icon-circle:hover .brk-icon > .before {\n    opacity: 1; }\n  .social__icon-circle-dark .after {\n    border-radius: 0 !important;\n    background: linear-gradient(to top, rgba(var(--brand-primary-rgb), 0.86) 0%, rgba(var(--secondary-rgb), 0.86) 100%) !important; }\n  .social__icon-circle-dark .before {\n    border-radius: 0 !important;\n    background: linear-gradient(to top, rgba(var(--brand-primary-rgb), 0.86) 0%, rgba(var(--brand-primary-rgb), 0.86) 100%) !important; }\n\n.social__icon-round {\n  margin-top: 40px; }\n  .social__icon-round .icon-wrap {\n    width: 110px;\n    height: 110px;\n    background: #fff;\n    border-radius: 30px;\n    margin: 0 auto 35px;\n    position: relative;\n    z-index: 1; }\n    .social__icon-round .icon-wrap:hover .brk-icon {\n      background: var(--brk-base-6);\n      border-color: var(--brk-base-1); }\n  .social__icon-round .brk-icon {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 65px;\n    height: 65px;\n    border-radius: 50%;\n    color: #fff;\n    font-size: 28px;\n    background: var(--brand-primary);\n    border: 2px solid transparent;\n    box-shadow: 0 5px 16px 0 rgba(var(--brand-primary-rgb), 0.5);\n    transition: all .4s ease;\n    z-index: 1; }\n    .social__icon-round .brk-icon:before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      z-index: 2; }\n  .social__icon-round:hover .icon-wrap {\n    background: var(--brand-primary); }\n  .social__icon-round:hover .brk-icon {\n    background: var(--brk-base-6);\n    border-color: var(--brk-base-1); }\n\n.social__icon-square {\n  max-width: 270px;\n  margin: 0 auto;\n  padding: 45px 20px;\n  background: #fff;\n  border: 1px solid rgba(var(--brand-primary-rgb), 0.1);\n  box-shadow: 0 10px 30px -10px rgba(var(--brand-primary-rgb), 0.15); }\n  .social__icon-square_dark {\n    border: 1px solid rgba(26, 27, 27, 0.05); }\n  @media (min-width: 992px) {\n    .social__icon-square {\n      margin-bottom: -50px; } }\n  .social__icon-square .text {\n    color: var(--brk-base-1) !important; }\n  .social__icon-square .brk-icon {\n    width: 85px;\n    height: 85px;\n    position: relative;\n    z-index: 1;\n    color: var(--brand-primary);\n    font-size: 28px;\n    margin-bottom: 23px;\n    border: 2px solid rgba(var(--brand-primary-rgb), 0.15);\n    transition: all .4s ease; }\n    .social__icon-square .brk-icon:hover {\n      color: #fff; }\n    .social__icon-square .brk-icon:before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      z-index: 2; }\n    .social__icon-square .brk-icon .slide-bg {\n      background: linear-gradient(to right, var(--brand-primary) 20%, var(--secondary) 70%); }\n  .social__icon-square_dark .brk-icon {\n    color: #1a1b1b;\n    border: 2px solid rgba(26, 27, 27, 0.05); }\n  .social__icon-square_dark .text {\n    color: #1a1b1b !important; }\n\n@media (min-width: 575px) {\n  [class^=\"col-\"]:nth-child(2n) .social__icon-honeycomb .hexagon {\n    order: 1; } }\n\n[class^=\"col-\"]:nth-child(2n) .social__icon-honeycomb .icon-title {\n  justify-content: flex-end; }\n\n.hexagon {\n  display: block;\n  position: relative;\n  width: 50%;\n  margin: 0 auto;\n  background-color: #fff;\n  transition: .3s background-color;\n  clip-path: polygon(125% 0, 150% 50%, 125% 100%, 0% 100%, -50% 50%, 0% 0); }\n  .hexagon__side {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 50%;\n    top: 50%;\n    transition: .3s background-color; }\n  .hexagon__side-1 {\n    transform: translate(-50%, -50%) rotate(60deg);\n    background-color: inherit; }\n  .hexagon__side-2 {\n    transform: translate(-50%, -50%) rotate(-60deg);\n    background-color: inherit; }\n  .hexagon::after {\n    content: '';\n    padding-top: 172%;\n    display: block; }\n  @supports (clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0)) {\n    .hexagon > .after {\n      content: '';\n      position: absolute;\n      top: -1px;\n      opacity: 1;\n      background: linear-gradient(25deg, var(--brk-base-6) 30%, var(--brk-base-2)) 60%;\n      transition-property: width,height;\n      transition-duration: .4s;\n      width: 0;\n      height: 102%;\n      left: 50%;\n      right: auto;\n      transform: scale(1) translateX(-50%);\n      clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0); }\n    .hexagon:hover > .after {\n      width: calc(200%); } }\n  @supports not (clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0)) {\n    .hexagon:hover {\n      background-color: var(--brk-base-6); }\n      .hexagon:hover .hexagon__side {\n        background-color: var(--brk-base-6); } }\n\n.social__icon-honeycomb {\n  margin-top: 30px;\n  margin-bottom: 30px;\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex-direction: column; }\n  .social__icon-honeycomb .hexagon {\n    width: calc(50% + 15px); }\n  .social__icon-honeycomb .icon-title {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    align-items: center;\n    padding: 20px 0 0; }\n    @media (min-width: 575px) {\n      .social__icon-honeycomb .icon-title {\n        padding: 20px 0;\n        height: 70px; } }\n    @media (min-width: 1200px) {\n      .social__icon-honeycomb .icon-title {\n        height: 115px;\n        padding: 40px 0; } }\n  .social__icon-honeycomb .brk-icon {\n    width: 85px;\n    height: 85px;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 1;\n    color: var(--brand-primary);\n    font-size: 36px;\n    transition: color .4s; }\n    .social__icon-honeycomb .brk-icon:before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      z-index: 2; }\n  .social__icon-honeycomb:hover .brk-icon {\n    color: #fff; }\n\n@media (min-width: 1200px) {\n  [class^=\"col-\"]:nth-child(2n) .social__icon-gradient .icon-title {\n    bottom: auto;\n    top: -44px; } }\n\n[class^=\"col-\"]:nth-child(2n) .social__icon-gradient > .after {\n  top: auto;\n  bottom: 0; }\n\n[class^=\"col-\"]:last-child .social__icon-gradient > .after {\n  width: 30vw;\n  left: 50%; }\n\n@media (min-width: 1200px) {\n  [class^=\"col-\"]:first-child .social__icon-gradient > .before {\n    display: inline-block; } }\n\n.social__icon-gradient {\n  margin-top: 30px;\n  margin-bottom: 30px;\n  position: relative;\n  z-index: 1; }\n  .social__icon-gradient > .before {\n    display: none;\n    position: absolute;\n    top: 50%;\n    right: 50%;\n    width: 30vw;\n    height: 50%;\n    background: var(--brand-primary);\n    background: linear-gradient(25deg, var(--brk-base-2) 40%, var(--brk-base-5)) 60%;\n    z-index: -1;\n    pointer-events: none; }\n  .social__icon-gradient > .after {\n    display: none;\n    position: absolute;\n    top: 0;\n    left: 50%;\n    width: 100%;\n    height: 50%;\n    background: var(--brand-primary);\n    background: linear-gradient(25deg, var(--brk-base-2) 40%, var(--brk-base-5)) 60%;\n    z-index: -1;\n    pointer-events: none; }\n    @media (min-width: 1200px) {\n      .social__icon-gradient > .after {\n        display: inline-block; } }\n  .social__icon-gradient .icon-title {\n    margin-top: 20px; }\n    @media (min-width: 1200px) {\n      .social__icon-gradient .icon-title {\n        margin-top: 0;\n        position: absolute;\n        bottom: -44px;\n        left: 50%;\n        transform: translate(-50%, 0); } }\n  .social__icon-gradient .brk-icon {\n    width: 85px;\n    height: 85px;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 1;\n    color: var(--brand-primary);\n    font-size: 36px;\n    transition: all .4s ease; }\n    .social__icon-gradient .brk-icon:before {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      z-index: 2; }\n  .social__icon-gradient:hover .brk-icon {\n    color: #fff; }\n","@import \"../../assets/styles/variables\";\r\n@import \"../../assets/styles/mixins\";\r\n\r\n[class*=\"social__icon\"] {\r\n\ta {\r\n\t\tdisplay: block;\r\n\t}\r\n\tp {\r\n\t\tmargin-top: 3px;\r\n\t}\r\n}\r\n\r\n.social__icon-circle {\r\n\tmargin-top: 40px;\r\n\t.brk-icon {\r\n\t\twidth: 95px;\r\n\t\theight: 95px;\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n\t\tcolor: $white;\r\n\t\tfont-size: 42px;\r\n\t\tmargin-bottom: 17px;\r\n\t\t&:before {\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 50%;\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translate(-50%, -50%);\r\n\t\t\tz-index: 2;\r\n\t\t}\r\n\t\t> .before {\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 0;\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\t\t\tbottom: 0;\r\n\t\t\tborder-radius: 50%;\r\n\t\t\tbackground: linear-gradient(45deg, var(--brk-base-2) 20%, var(--brk-base-5) 70%);\r\n\t\t\topacity: 0;\r\n\t\t\ttransition: all .4s ease;\r\n\t\t\tz-index: 1;\r\n\t\t}\r\n\t\t> .after {\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 0;\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\t\t\tbottom: 0;\r\n\t\t\tborder-radius: 50%;\r\n\t\t\tbackground: linear-gradient(45deg, var(--brk-base-3) 20%, var(--brk-secondary-3) 70%);\r\n\t\t\tz-index: -1;\r\n\t\t}\r\n\t}\r\n\t&:hover {\r\n\t\t.brk-icon > .before {\r\n\t\t\topacity: 1;\r\n\t\t}\r\n  }\r\n  &-dark{\r\n    .after{\r\n      border-radius: 0 !important;\r\n      background: linear-gradient(to top, rgba(var(--brand-primary-rgb), 0.86) 0%, rgba(var(--secondary-rgb), 0.86) 100%) !important;\r\n    }\r\n    .before{\r\n      border-radius: 0 !important;\r\n      background: linear-gradient(to top, rgba(var(--brand-primary-rgb), 0.86) 0%, rgba(var(--brand-primary-rgb), 0.86) 100%) !important;\r\n    }\r\n  } \r\n}\r\n\r\n.social__icon-round {\r\n\tmargin-top: 40px;\r\n\t.icon-wrap {\r\n\t\twidth: 110px;\r\n\t\theight: 110px;\r\n\t\tbackground: $white;\r\n\t\tborder-radius: 30px;\r\n\t\tmargin: 0 auto 35px;\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n\t\t&:hover .brk-icon {\r\n\t\t\tbackground: var(--brk-base-6);\r\n\t\t\tborder-color: var(--brk-base-1);\r\n\t\t}\r\n\t}\r\n\t.brk-icon {\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tleft: 50%;\r\n\t\ttransform: translate(-50%, -50%);\r\n\t\twidth: 65px;\r\n\t\theight: 65px;\r\n\t\tborder-radius: 50%;\r\n\t\tcolor: $white;\r\n\t\tfont-size: 28px;\r\n\t\tbackground: var(--brand-primary);\r\n\t\tborder: 2px solid transparent;\r\n\t\tbox-shadow: 0 5px 16px 0 rgba(var(--brand-primary-rgb), 0.5);\r\n\t\ttransition: all .4s ease;\r\n\t\tz-index: 1;\r\n\t\t&:before {\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 50%;\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translate(-50%, -50%);\r\n\t\t\tz-index: 2;\r\n\t\t}\r\n\t}\r\n\t&:hover {\r\n\t\t.icon-wrap {\r\n\t\t\tbackground: var(--brand-primary);\r\n\t\t}\r\n\t\t.brk-icon {\r\n\t\t\tbackground: var(--brk-base-6);\r\n\t\t\tborder-color: var(--brk-base-1);\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.social__icon-square {\r\n\tmax-width: 270px;\r\n\tmargin: 0 auto;\r\n\tpadding: 45px 20px;\r\n\tbackground: $white;\r\n  border: 1px solid rgba(var(--brand-primary-rgb), .1);\r\n  &_dark{\r\n    border: 1px solid  rgba(26, 27, 27, 0.05);\r\n  }\r\n\tbox-shadow: 0 10px 30px -10px rgba(var(--brand-primary-rgb), 0.15);\r\n\t@media(min-width: 992px) {\r\n\t\tmargin-bottom: -50px;\r\n  }\r\n  .text{\r\n    color: var(--brk-base-1) !important;\r\n  }\r\n\t.brk-icon {\r\n\t\twidth: 85px;\r\n\t\theight: 85px;\r\n\t\tposition: relative;\r\n\t\tz-index: 1;\r\n    color: var(--brand-primary);\r\n\t\tfont-size: 28px;\r\n\t\tmargin-bottom: 23px;\r\n    border: 2px solid rgba(var(--brand-primary-rgb), 0.15);\r\n\t\ttransition: all .4s ease;\r\n\t\t&:hover {\r\n\t\t\tcolor: $white;\r\n\t\t}\r\n\t\t&:before {\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 50%;\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translate(-50%, -50%);\r\n\t\t\tz-index: 2;\r\n\t\t}\r\n\t\t.slide-bg {\r\n\t\t\tbackground: linear-gradient(to right, var(--brand-primary) 20%, var(--secondary) 70%);\r\n\t\t}\r\n  }\r\n  &_dark{\r\n    .brk-icon{\r\n      color: #1a1b1b;\r\n      border: 2px solid rgba(26, 27, 27, 0.05);\r\n    }\r\n    .text{\r\n      color: #1a1b1b !important;\r\n    }\r\n  }\r\n}\r\n\r\n[class^=\"col-\"]:nth-child(2n) {\r\n\t.social__icon-honeycomb .hexagon {\r\n\t\t@media(min-width: 575px) {\r\n\t\t\torder: 1;\r\n\t\t}\r\n\t}\r\n\t.social__icon-honeycomb .icon-title {\r\n\t\tjustify-content: flex-end;\r\n\t}\r\n}\r\n\r\n.hexagon {\r\n  display: block;\r\n  position: relative;\r\n  width: 50%;\r\n  margin: 0 auto;\r\n  background-color: #fff;\r\n  transition: .3s background-color;\r\n  clip-path: polygon(125% 0,150% 50%, 125% 100%,0% 100%,-50% 50%,0% 0);\r\n  &__side {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    left: 50%;\r\n    top: 50%;\r\n    transition: .3s background-color;\r\n  }\r\n  &__side-1 {\r\n    transform: translate(-50%,-50%) rotate(60deg);\r\n    background-color: inherit;\r\n  }\r\n  &__side-2 {\r\n    transform: translate(-50%,-50%) rotate(-60deg);\r\n    background-color: inherit;\r\n  }\r\n  \r\n  &::after {\r\n    content: '';\r\n    padding-top: 172%;\r\n    display: block;\r\n  }\r\n  @supports (clip-path: polygon(75% 0,100% 50%,75% 100%,25% 100%,0 50%,25% 0)){\r\n    > .after {\r\n      content: '';\r\n      position: absolute;\r\n      top: -1px;\r\n      opacity: 1;\r\n      background: linear-gradient(25deg,var(--brk-base-6) 30%,var(--brk-base-2)) 60%;\r\n      transition-property: width,height;\r\n      transition-duration: .4s;\r\n      width: 0;\r\n      height: 102%;\r\n      left: 50%;\r\n      right: auto;\r\n      transform: scale(1) translateX(-50%);\r\n      clip-path: polygon(75% 0,100% 50%,75% 100%,25% 100%,0 50%,25% 0);\r\n    }\r\n    &:hover{\r\n      > .after {\r\n        width: calc(200%);\r\n      }\r\n    }\r\n  }\r\n  @supports not (clip-path: polygon(75% 0,100% 50%,75% 100%,25% 100%,0 50%,25% 0)){\r\n    &:hover{\r\n      background-color: var(--brk-base-6);\r\n      .hexagon__side{\r\n        background-color: var(--brk-base-6);      \r\n      }\r\n    }\r\n  }\r\n\r\n}\r\n\r\n.social__icon-honeycomb {\r\n\tmargin-top: 30px;\r\n\tmargin-bottom: 30px;\r\n\tposition: relative;\r\n\tz-index: 1;\r\n\tdisplay: flex;\r\n  flex-direction: column;\r\n\r\n  .hexagon {\r\n    width: calc(50% + 15px);\r\n  }\r\n  \r\n\t.icon-title {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\tjustify-content: flex-start;\r\n\t\talign-items: center;\r\n\t\tpadding: 20px 0 0;\r\n\t\t@media(min-width: 575px) {\r\n\t\t\tpadding: 20px 0;\r\n\t\t\theight: 70px;\r\n\t\t}\r\n\t\t@media(min-width: 1200px) {\r\n\t\t\theight: 115px;\r\n\t\t\tpadding: 40px 0;\r\n\t\t}\r\n\t}\r\n\t.brk-icon {\r\n\t\twidth: 85px;\r\n\t\theight: 85px;\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tleft: 50%;\r\n\t\ttransform: translate(-50%, -50%);\r\n\t\tz-index: 1;\r\n\t\tcolor: var(--brand-primary);\r\n\t\tfont-size: 36px;\r\n\t\ttransition: color .4s;\r\n\t\t&:before {\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 50%;\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translate(-50%, -50%);\r\n\t\t\tz-index: 2;\r\n\t\t}\r\n\t}\r\n\t&:hover {\r\n\t\t.brk-icon {\r\n\t\t\tcolor: $white;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n[class^=\"col-\"]:nth-child(2n) {\r\n\t.social__icon-gradient .icon-title {\r\n\t\t@media(min-width: 1200px) {\r\n\t\t\tbottom: auto;\r\n\t\t\ttop: -44px;\r\n\t\t}\r\n\t}\r\n\t.social__icon-gradient > .after {\r\n\t\ttop: auto;\r\n\t\tbottom: 0;\r\n\t}\r\n}\r\n\r\n[class^=\"col-\"]:last-child .social__icon-gradient > .after {\r\n\twidth: 30vw;\r\n\tleft: 50%;\r\n}\r\n\r\n[class^=\"col-\"]:first-child .social__icon-gradient > .before {\r\n\t@media(min-width: 1200px) {\r\n\t\tdisplay: inline-block;\r\n\t}\r\n}\r\n\r\n.social__icon-gradient {\r\n\tmargin-top: 30px;\r\n\tmargin-bottom: 30px;\r\n\tposition: relative;\r\n\tz-index: 1;\r\n\t> .before {\r\n\t\tdisplay: none;\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tright: 50%;\r\n\t\twidth: 30vw;\r\n\t\theight: 50%;\r\n\t\tbackground: var(--brand-primary);\r\n\t\tbackground: linear-gradient(25deg, var(--brk-base-2) 40%, var(--brk-base-5)) 60%;\r\n\t\tz-index: -1;\r\n\t\tpointer-events: none;\r\n\t}\r\n\t> .after {\r\n\t\tdisplay: none;\r\n\t\tposition: absolute;\r\n\t\ttop: 0;\r\n\t\tleft: 50%;\r\n\t\twidth: 100%;\r\n\t\theight: 50%;\r\n\t\tbackground: var(--brand-primary);\r\n\t\tbackground: linear-gradient(25deg, var(--brk-base-2) 40%, var(--brk-base-5)) 60%;\r\n\t\tz-index: -1;\r\n\t\tpointer-events: none;\r\n\t\t@media(min-width: 1200px) {\r\n\t\t\tdisplay: inline-block;\r\n\t\t}\r\n\t}\r\n\t.icon-title {\r\n\t\tmargin-top: 20px;\r\n\t\t@media(min-width: 1200px) {\r\n\t\t\tmargin-top: 0;\r\n\t\t\tposition: absolute;\r\n\t\t\tbottom: -44px;\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translate(-50%, 0);\r\n\t\t}\r\n\t}\r\n\t.brk-icon {\r\n\t\twidth: 85px;\r\n\t\theight: 85px;\r\n\t\tposition: absolute;\r\n\t\ttop: 50%;\r\n\t\tleft: 50%;\r\n\t\ttransform: translate(-50%, -50%);\r\n\t\tz-index: 1;\r\n\t\tcolor: var(--brand-primary);\r\n\t\tfont-size: 36px;\r\n\t\ttransition: all .4s ease;\r\n\t\t&:before {\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 50%;\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translate(-50%, -50%);\r\n\t\t\tz-index: 2;\r\n\t\t}\r\n\t}\r\n\t&:hover {\r\n\t\t.brk-icon {\r\n\t\t\tcolor: $white;\r\n\t\t}\r\n\t}\r\n}"]}