@import(reference) "/apps/ps/clientlibs/clientlib-site/css/pluralsight-global-variables";.statistics{position:relative;overflow:hidden;.statistics-component{position:relative;z-index:1;max-width:1240px;margin:0 auto;width:100%;.statistics-text .statistics-text-component .text-simple.statistics-text-number p{.ps-lg-heading()}
.statistics-text .statistics-text-component .text-simple.statistics-text-title p{.ps-med-text()}
.statistics-title{text-align:center;max-width:1200px;margin:0 auto}
.statistics-subtitle{text-align:center;max-width:1200px;margin:0 auto}
@media only screen and (min-width:1080px){.statistics-subtitle{padding:0 44px;// Padding applied only for desktop views}
}
@media only screen and (min-width:320px) and (max-width:1024px){padding-left:28px;padding-right:28px}
.statList-subtitle{text-align:center;max-width:1200px;margin:0 auto;.rich-text-editor-component i{font-size:12px}
.rich-text-editor-component b{font-size:18px}
}
@media only screen and (min-width:1080px){.statList-subtitle{padding:0 44px;// Padding applied only for desktop views}
}
.statistics-container .statistics-item .statistics-text-component .rich-text-editor .rich-text-editor-component i{font-size:12px}
.statistics-container .statistics-item .statistics-text-component .rich-text-editor .rich-text-editor-component b{font-size:18px}
}
.statistics-container{max-width:1200px;margin:0 auto;.statistics-item{&:first-child:nth-last-child(1){flex:0 0 33.3333%}
&:first-child:nth-last-child(5),&:first-child:nth-last-child(5)~.statistics-item{flex:0 0 32%}
&:first-child:nth-last-child(6),&:first-child:nth-last-child(6)~.statistics-item{flex:0 0 32%}
&:not(:last-child){margin-bottom:30px;@media screen and (min-width:1090px){margin-bottom:0}
}
}
}
&.-horizontal,&.-vertical{@media screen and (min-width:1090px){.statistics-container{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;.statistics-item{flex:1 !important}
}
}
}
&.-grid{.statistics-component{padding-bottom:30px;padding-top:50px;@media only screen and (min-width:320px) and (max-width:768px){padding-right:28px;padding-left:28px;.statistics-text .statistics-text-component .text-simple.statistics-text-title p{font-size:16px}
.statistics-text .statistics-text-component .text-simple.statistics-text-number p{font-size:48px;@media only screen and (min-width:320px) and (max-width:1024px){font-size:20px}
}
}
.statistics-container{--gap:2em;--line-thickness:1px;--line-color:#404376;--line-offset:calc(var(--gap) / 2);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch;gap:var(--gap);overflow:hidden;&.fourStats{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
@media only screen and (max-width:768px){&.fourStats{grid-template-columns:repeat(2,minmax(80px,1fr))}
grid-template-columns:repeat(2,minmax(80px,1fr))}
.statistics-item{position:relative;margin-bottom:30px;padding-top:30px}
.statistics-item::before,.statistics-item::after{content:"" !important;background-color:var(--line-color);position:absolute}
.statistics-item::after{width:100vw;height:1px;top:calc(var(--line-offset) * -1);left:0}
.statistics-item::before{width:1px;height:100vh;top:0;left:calc(var(--line-offset) * -1)}
}
}
}
@media only screen and (min-width:1024px){.statistics-component{padding-left:28px;padding-right:28px}
}
&.-vertical{.statistics-text-component{display:flex;flex-direction:column;text-align:center}
.statistics-item{&:first-child:nth-last-child(2),&:first-child:nth-last-child(2)~.statistics-item{flex:0 0 33.3333%}
}
}
&.-horizontal{.statistics-text-component{@media screen and (max-width:1024px){flex-direction:column}
}
}
&.-bkgd-inky-blue{background-color:#1B1834 !important;.statistics-component{.statList-subtitle,.statistics-text-simple .text-simple-wrapper p,.statistics-container .statistics-item .statistics-text-component .rich-text-editor,.statistics-container .statistics-item .statistics-text-component .statistics-text-title .text-simple-wrapper,.statistics-title .cmp-title .cmp-title__text{color:white}
}
.left{@media only screen and (min-width:1024px){background:url("../../../../../../content/dam/pluralsight2/product/skills/why-skills-2022/halftone-white-mirror.png") repeat;background-size:cover;background-blend-mode:overlay;position:absolute;left:0;top:350px;width:500px;height:100%;z-index:0;opacity:.1}
}
.right{@media only screen and (min-width:1024px){background:url("../../../../../../content/dam/pluralsight2/product/skills/why-skills-2022/halftone-white2.png") no-repeat;background-size:cover;background-blend-mode:overlay;position:absolute;left:1000px;top:300px;width:500px;height:100%;z-index:0;opacity:.1}
}
}
&.-bkgd-white{background:white;.background-overlay{filter:brightness(0.5)}
.center{@media only screen and (min-width:1024px){background:url("../../../../../../content/dam/pluralsight2/product/skills/why-skills-2022/line-squigle.png") no-repeat;background-size:contain;background-position:top center;background-blend-mode:normal;position:absolute;height:auto;width:100vw;top:0;left:0;z-index:0;padding-bottom:56.25%}
}
}
&.-bkgd-transparent{background:transparent;.background-overlay{filter:brightness(0.5)}
.center{@media only screen and (min-width:1024px){background:url("../../../../../../content/dam/pluralsight2/product/skills/why-skills-2022/line-squigle.png") no-repeat;background-size:contain;background-position:top center;background-blend-mode:normal;position:absolute;height:auto;width:100vw;top:0;left:0;z-index:0;padding-bottom:56.25%}
}
}
&.no-grid{.statistics-component{.statistics-container{max-width:1550px;display:flex;flex-wrap:wrap;padding:50px;align-items:center;justify-content:center;@media only screen and (max-width:768px){padding:30px;flex-direction:column;align-items:stretch}
.statistics-item{padding:48px;flex:0 0 33.3333% !important;max-width:30%;@media only screen and (max-width:769px){max-width:unset}
@media only screen and (max-width:768px){padding:25px 20px;flex:0 0 100%}
&:nth-child(1):nth-last-child(6),&:nth-child(2):nth-last-child(5),&:nth-child(3):nth-last-child(4),&:nth-child(4):nth-last-child(3),&:nth-child(5):nth-last-child(2),&:nth-child(6):nth-last-child(1){flex:0 0 33.3333% !important}
&:nth-child(1):nth-last-child(5),&:nth-child(2):nth-last-child(4),&:nth-child(3):nth-last-child(3),&:nth-child(4):nth-last-child(2),&:nth-child(5):nth-last-child(1){flex:0 0 33.3333% !important}
&:nth-child(1):nth-last-child(4),&:nth-child(2):nth-last-child(3),&:nth-child(3):nth-last-child(2),&:nth-child(4):nth-last-child(1){flex:0 0 33.3333% !important}
&:nth-child(1):nth-last-child(3),&:nth-child(2):nth-last-child(2),&:nth-child(3):nth-last-child(1){flex:0 0 33.3333% !important}
&:nth-child(1):nth-last-child(2),&:nth-child(2):nth-last-child(1),&:nth-child(1):nth-last-child(1){flex:0 0 50% !important}
&:nth-child(1):nth-last-child(1){flex:0 0 100% !important}
}
}
}
}
}
.statistics .background-overlay{@media only screen and (min-width:1024px){background:url("../../../../../../content/dam/pluralsight2/product/skills/why-skills-2022/white-halftone1.png") no-repeat;background-size:cover;background-blend-mode:overlay;position:absolute;top:100px;left:900px;width:1249.92px;height:100%;z-index:0;opacity:.1}
}
.statistics.no-grid:has(.stat-list) .statistics-container{@media only screen and (max-width:768px){align-items:center}
}
.statistics:has(.stat-list) .statistics-container .statistics-item{@media screen and (min-width:1090px){&:first-child:nth-last-child(5),&:first-child:nth-last-child(5)~.statistics-item{flex:0 0 32% !important}
}
@media screen and (max-width:440px){.statistics-text-component{gap:0}
}
.statistics-text-component{.statistics-image img{object-fit:contain}
}
}
.statistics.no-grid:has(.stat-list) .statistics-container .statistics-item{@media only screen and (max-width:768px){max-width:100%}
}