*{box-sizing:border-box}h1,h2,h3,h4,h5,h6,p{font-weight:400;font-size:inherit;margin:0}body{font-family:Roboto,sans-serif;line-height:1.2;margin:0;min-height:100vh;display:grid;place-items:center;background-color:#f1cd97;color:#000;padding:15px}.blog{display:flex;flex-direction:column;width:100%;max-width:1000px;background-color:#fff;box-shadow:1px 1px 15px #0003}.blog__left{display:flex;gap:20px 10px;flex-wrap:wrap;padding:clamp(35px,8vw,70px) clamp(15px,4vw,40px) 40px;color:#fff;background-color:#484956}.blog__header{display:flex;flex-direction:column;font-size:clamp(22px,5vw,30px);line-height:.6}.blog__title{font-weight:700}.blog__subtitle{font-weight:300;line-height:1.8}.blog__subtitle span{border-bottom:4px solid #e37b62;padding-bottom:12px}.blog__creator{display:flex;align-items:center;column-gap:15px;margin-left:auto}.blog__avatar{position:relative;width:64px;aspect-ratio:1;border-radius:50%;transition:transform .3s ease-in}.blog__avatar:after,.blog__avatar:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;transition:opacity .3s ease-in}.blog__avatar:after{box-shadow:0 6px 20px #000000bf}.blog__avatar:before{box-shadow:#e37b6266 0 5px,#e37b624d 0 10px,#e37b6233 0 15px,#e37b621a 0 20px,#e37b620d 0 25px;opacity:0}.blog__avatar img{display:block;width:100%;height:100%;border-radius:inherit}@media (hover: hover){.blog__avatar:hover{transform:translateY(-6px)}.blog__avatar:hover:after{opacity:0}.blog__avatar:hover:before{opacity:1}}.blog__name{color:#fff;text-decoration:none;transition-property:color,opacity;transition-duration:.2s;transition-timing-function:ease}@media (hover: hover){.blog__name:hover{color:#e37b62}}.blog__name:active{opacity:.6}.blog__content{display:flex;flex-direction:column;row-gap:30px;padding:clamp(35px,8vw,60px) clamp(15px,4vw,40px) 35px;box-shadow:inset 0 -3px 20px #0000001a}.blog__text{font-size:clamp(16px,4vw,20px);font-weight:300;letter-spacing:.03em;line-height:1.4}.blog__text:first-child:first-letter{font-size:26px;font-weight:500}.blog__footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:clamp(20px,4vw,28px) clamp(15px,4vw,40px)}.blog__date{text-transform:capitalize;text-wrap:balance}.blog__date span{font-weight:700}.blog__btn-group{display:flex;align-items:center;column-gap:16px}.blog__btn{border:none;border-radius:4px;background-color:transparent;padding:6px;font-size:inherit;display:flex;align-items:center;justify-content:center;column-gap:10px;cursor:pointer;transition-property:background-color,transform;transition-duration:.2s;transition-timing-function:ease}.blog__btn img{display:block;width:22px;aspect-ratio:1}.blog__btn span{color:#aaa;transition:color .2s ease}@media (hover: hover){.blog__btn:hover{background-color:#e37b62}.blog__btn:hover span{color:#000}}.blog__btn:active{transform:translateY(5px);background-color:#c86752}@media (width >= 768px){.blog{flex-direction:row}.blog__left{min-width:400px;flex-direction:column;justify-content:space-between}.blog__creator{margin-left:0}}