article .wrapper{ #background: #3ea0e2;max-width:1080px;margin:50px auto;padding:20px;position:relative}article .wrapper .center-line{position:absolute;height:100%;width:4px;background:#bbb;left:50%;top:20px;transform:translateX(-50%)}article .wrapper .row{display:flex}article .wrapper .row-1{justify-content:flex-start}article .wrapper .row-2{justify-content:flex-end}article .wrapper .row section{background:#bbb;border-radius:5px;width:calc(50% - 40px);padding:20px;position:relative}article .wrapper .row section::before{position:absolute;content:"";height:15px;width:15px;background:#bbb;top:28px;z-index:-1;transform:rotate(45deg)}article .row-1 section::before{right:-7px}article .row-2 section::before{left:-7px}article .row section .icon,article .center-line .scroll-icon{position:absolute;background:#f2f2f2;height:40px;width:40px;text-align:center;line-height:40px;border-radius:50%;color:#3ea0e2;font-size:17px;box-shadow:0 0 0 4px #bbb,inset 0 2px rgba(0,0,0,8%),0 3px 0 4px rgba(0,0,0,5%)}article .center-line .scroll-icon{bottom:0;left:50%;font-size:25px;transform:translateX(-50%)}article .row-1 section .icon{top:15px;right:-60px}article .row-2 section .icon{top:15px;left:-60px}article .row section .details,article .row section .bottom{display:flex;align-items:center;justify-content:space-between}article .row section .details .title{font-size:22px;font-weight:600;color:#000}article .row section p{margin:10px 0 17px;color:#000}article .row section .bottom a{text-decoration:none;background:#3ea0e2;color:#bbb;padding:7px 15px;border-radius:5px;font-weight:400;transition:all .3s ease}article .row section .bottom a:hover{transform:scale(.97)}@media(max-width:790px){.wrapper .center-line{left:40px}.wrapper .row{margin:30px 0 3px 60px}.wrapper .row section{width:100%}.row-1 section::before{left:-7px}.row-1 section .icon{left:-60px}}@media(max-width:440px){.wrapper .center-line,.row section::before,.row section .icon{display:none}.wrapper .row{margin:10px 0}}