.feed{height:calc(100vh - 100px);width:412px;display:flex;flex-direction:column;padding:10px;background:#000;border:2px solid var(--clr-gray-100);overflow:hidden}.feed .feed-wrapper{overflow-y:scroll}.feed .feed-item:not(:first-child,:last-child){margin:10px 0}.post-carousel{border-top:2px solid var(--clr-gray-100);border-bottom:2px solid var(--clr-gray-100);height:400px;width:100%;display:grid;grid-template-columns:1fr}.post-carousel>div{grid-row-start:1;grid-column-start:1}.post-carousel .post-carousel-media{position:relative;width:100%;height:100%;display:flex;cursor:pointer}.post-carousel .post-carousel-navigation{height:100%;width:90%;position:relative;cursor:pointer;margin:0 auto}.post-carousel .post-carousel-navigation>*{z-index:3}.post-carousel .post-carousel-navigation .navigate-btn-left{position:absolute;top:50%;left:0;transform:translateY(-50%)}.post-carousel .post-carousel-navigation .navigate-btn-right{position:absolute;top:50%;right:0;transform:translateY(-50%)}.post-carousel .post-carousel-navigation .navigate-bubble-wrapper{position:absolute;bottom:8px;left:50%;transform:translate(-50%,-50%);display:flex}.post-carousel .post-carousel-navigation .navigate-bubble-wrapper .navigate-bubble{width:10px;height:10px;border-radius:50%;background-color:var(--clr-gray-100);margin:0 5px;cursor:pointer}.post-carousel .post-carousel-navigation .navigate-bubble-wrapper .navigate-bubble.active{background-color:var(--clr-gray-300)}.post-carousel-navigation-btn img{width:20px;height:20px}.post-carousel-img{position:absolute;top:0;left:0;background-size:cover;width:100%;height:100%}.post-carousel-img.fallback{height:50px;width:50px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.post-carousel-video{z-index:2}.post-carousel-video video{background-size:cover;width:100%;height:100%;cursor:pointer}.post-carousel-video .play-pause-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;width:50px;height:50px;cursor:pointer;transition:background-color .3s;z-index:3}.post-carousel-video .play-pause-btn:hover{background-color:#000000b3}.post-carousel-video .fallback-img{height:50px;width:50px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.post-footer{display:flex;flex-direction:column;align-items:start;padding:10px 5px}.post-footer .post-footer-like-btn{font-size:14px;font-weight:600;display:flex;align-items:end;gap:5px;margin-bottom:5px}.post-footer .post-footer-like-btn.liked{color:var(--clr-blue-100)}.post-footer .post-footer-like-btn img{width:20px;height:20px}.post-footer .post-footer-like-counts{font-size:14px;font-weight:600}.post-footer .post-footer-comment-counts{font-size:12px}.post-header{display:flex;align-items:center;padding:10px;gap:5px}.post-header .post-header-profile-img{width:50px;height:50px;border-radius:50%}.post-header-timestamp{margin-left:5px;color:var(--clr-gray-200)}.post-header-timestamp .post-header-timestamp-dot{margin-right:8px;display:inline-block;height:8px;width:8px;border-radius:50%;background-color:var(--clr-gray-100);vertical-align:middle}.post{background-color:#fff}:root{font-family:Nunito,sans-serif;line-height:1.5;font-weight:400;font-optical-sizing:auto;font-style:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--clr-gray-100: #ced4da;--clr-gray-200: #aaaaaa;--clr-gray-300: #555555;--clr-blue-100: #4a86e8}*{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none;color:inherit}button{border:none;background-color:transparent;cursor:pointer}input,textarea,select,button{outline:none}ul,ol{list-style:none}img{max-width:100%;height:auto}#root{display:flex;justify-content:center;margin:10px}.rotate-180{transform:rotate(180deg)}