*{box-sizing:border-box;margin:0;padding:0}body{background-color:#ecf2f8;font-family:Manrope,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;grid-template-rows:1fr;outline:1px solid red}.container{display:flex;border-radius:12px;width:100%;max-width:942px;background-color:#fff;box-shadow:0 0 80px 25px #0000001a}.image{width:100%;max-width:390px;height:380px;overflow:hidden;border-radius:12px 0 0 12px}.image img{width:123%;height:auto}.content{display:flex;flex-direction:column;gap:16px;padding:45px;width:100%;max-width:552px}.title{font-size:1.6rem;font-weight:700;color:#48556a;line-height:1.5}p{font-size:16px;color:#6d7f97;font-weight:500;line-height:1.6}.bottom-content{display:flex;align-items:center;justify-content:space-between}.author-container{display:flex;align-items:center;gap:20px}.author-avatar img{width:50px;border-radius:50%}.author-name{display:flex;flex-direction:column;gap:4px}.name{color:#48556a;font-weight:700}.date{color:#9eafc2}.share-btn{position:relative;z-index:999;display:flex;align-items:center;justify-content:center;background-color:#ecf2f8;border-radius:50%;height:35px;width:35px;cursor:pointer}.share-btn:hover{background-color:#6d7f97}.share-btn img{width:17px;height:15px}.share-btn:hover img{filter:contrast(200%) brightness(200%) saturate(0%)}.share-container{position:relative}.share-contents{position:absolute;left:-100px;top:-75px;display:flex;align-items:center;justify-content:center;padding:15px 35px;gap:15px;border-radius:10px;background-color:#48556a;letter-spacing:.3rem;color:#9eafc2;font-size:.73rem;box-shadow:10px 20px 30px 5px #0000000d;z-index:998}.share-contents:after{content:"";position:absolute;bottom:-10px;border-width:10px 10px 0px 10px;border-style:solid;border-color:hsl(217,19%,35%) transparent transparent transparent}.share-contents img{cursor:pointer}.share-text{pointer-events:none}footer{position:absolute;text-align:center;bottom:0;right:0;left:0;margin:auto}.share-btn.active{background-color:#6d7f97}.share-btn.active img{filter:contrast(200%) brightness(200%) saturate(0%)}.share-bottom-content-mobile{display:none}.top-content{display:flex;flex-direction:column;gap:16px}@media (max-width: 768px){main{width:100%;padding:10px}.container{flex-direction:column;max-width:100%;gap:20px}.content{max-width:642px;padding:20px 35px;height:auto}.title{font-size:1.11rem;text-align:justify}p{font-size:.9rem}.image{position:relative;max-width:642px;height:220px;align-items:center}.image img{position:relative;top:-15px;width:100%;height:auto}.author-name{font-size:.9rem}.author-container{gap:18px}.share-contents:after{display:none}.share-contents{position:fixed;top:600px;left:-100px;width:max-content;max-width:100vw}.bottom-content{padding:20px 35px}.share-bottom-content-mobile.active{display:flex;width:100%;max-width:100%}.bottom-content.hide{display:none}.share-contents-mobile{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:100%;gap:12px;background-color:#48556a;padding:20px 35px;border-radius:0 0 12px 12px;margin-top:10px}.content.active{padding:0}.top-content{padding:20px 35px 0}.platforms-mobile{display:flex;align-items:center;justify-content:center;gap:15px;letter-spacing:.35rem;color:#9eafc2;font-size:.9rem}.image{border-radius:12px 12px 0 0}}