@media screen{body{background-image:url(/images/community/main-bg.svg)}#main-feature{& .inner{margin:0 auto 64px}& figure{display:flex;& img{border:6px solid #fff;width:320px;height:240px;margin:0;position:relative;box-shadow:0 0 8px #0003;&:first-child{z-index:3;transform:rotate(10deg)}&:nth-child(2){z-index:2;transform:rotate(3deg)}&:nth-child(3){z-index:1;transform:rotate(-7deg)}}}}#concept{background-color:#f3f5f8;position:relative;overflow:hidden;& .background{z-index:0;opacity:.1;filter:grayscale(50%);background-position:top;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute;top:0;left:0}}#friends{& section{padding:32px 0}& .groups{flex-wrap:wrap;justify-content:center;margin:16px 0 -16px;display:flex;& section{box-sizing:border-box;border:1px solid #ccc;border-radius:8px;margin-top:16px;margin-bottom:16px;padding:24px}}& section h3{text-align:left;margin-bottom:16px}}}@media screen and (width>=1024px){#main-feature figure{width:928px;margin:0 auto;& img{&:first-child{margin:0 0 0 20px}&:nth-child(2){margin:20px 0 0 -40px}&:nth-child(3){margin:0 0 0 -64px}}}#concept .inner{max-width:800px;margin:120px auto}#friends .row.header{max-width:800px;margin:0 auto}}@media screen and (width<=1023px){#concept .inner{margin:48px auto}}@media screen and (width>=768px) and (width<=1023px){#main-feature figure img{&:first-child{margin:0 0 0 24px}&:nth-child(2){margin:160px 0 0 -200px}&:nth-child(3){margin:0 0 0 -160px}}}@media screen and (width<=767px){#main-feature figure{flex-direction:column;align-items:center;& img{width:240px;height:180px;&:nth-child(2){margin:-16px 0 0 32px}&:nth-child(3){margin:-32px 0 0 -32px}}}}