.sidebar { lost-column: 1/3; } .sidebar .sidebar-inner { position: relative; padding: 40px; } .sidebar .sidebar-inner:after { background: #eee; background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%); position: absolute; content: ''; width: 1px; height: 540px; top: 30px; right: -10px; bottom: 0; } .sidebar .sidebar-inner img { display: inline-block; margin-bottom: 0; border-radius: 50%; background-clip: padding-box; } .sidebar .sidebar-inner h1, .sidebar .sidebar-inner h2 { font-size: 18px; font-weight: 500; line-height: 18px; margin: 20px 0 10px; } .sidebar .sidebar-inner p { color: #888; font-size: 16px; line-height: 26px; margin-bottom: 26px; } .sidebar .sidebar-inner p.copyright { color: #b6b6b6; font-size: 14px; } @media (max-width:1100px) { .sidebar .sidebar-inner { padding: 35px 20px 0; } .sidebar { lost-column: 1/2; } } @media (max-width:900px) { .sidebar { lost-column: 5/12; } .sidebar .sidebar-inner { padding: 30px 20px 0; } } @media (max-width:500px) { .sidebar { lost-column: 1; } .sidebar .sidebar-inner { padding: 25px 20px 0; } .sidebar .sidebar-inner:after { display: none; } }