* {
    box-sizing:border-box;
}
body {
    margin:0;
    font-family:Arial,sans-serif;
    background:#f1f5f9;
    color:#142d50;
}
header {
    height:72px;
    background:#2868b8;
    color:#fff;
    display:flex;
    align-items:center;
    padding:8px 26px;
    gap:45px;
}
.brand {
    display:flex;
    align-items:center;
    min-width:300px;
}
.brand img {
    width:52px;
    height:52px;
    margin-right:12px;
    border-radius:9px;
}
.brand b {
    font-size:25px;
    letter-spacing:1px;
}
.brand small,.profile span {
    display:block;
    font-size:10px;
}
.search {
    flex:1;
    max-width:510px;
    padding:13px 18px;
    border:0;
    border-radius:7px;
    font-size:14px;
}
.profile {
    margin-left:auto;
}
.layout {
    display:grid;
    grid-template-columns:210px 1fr;
    min-height:calc(100vh - 72px);
}
aside {
    background:linear-gradient(#0d4f93,#083f76);
    color:#fff;
    padding:18px 12px;
    position:relative;
}
nav a {
    display:block;
    padding:13px;
    border-radius:6px;
    margin:2px 0;
    color:#fff;
    text-decoration:none;
}
nav a.active {
    background:#2871c4;
}
.side-logo {
    margin-top:110px;
    text-align:center;
}
.side-logo img {
    width:70px;
    display:block;
    margin:0 auto 10px;
}
.side-logo b,.side-logo small {
    display:block;
    margin-top:8px;
}
blockquote {
    margin:50px 8px 0;
    font-style:italic;
    line-height:1.55;
}
.hero {
    height:210px;
    padding:65px 42px 25px;
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:end;
    background:linear-gradient(90deg,rgba(5,34,65,.75),rgba(5,34,65,.15)),url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1800&q=80') center/cover;
}
.hero h1 {
    font-size:40px;
    margin:0;
    text-shadow:0 2px 5px #000;
}
.hero p {
    font-size:18px;
}
.hero em {
    font-family:cursive;
    font-size:24px;
    text-align:right;
}
.actions {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    padding:12px 16px;
}
.actions button {
    border:0;
    border-radius:5px;
    color:#fff;
    padding:14px;
    font-size:26px;
    text-align:left;
    background:#1976d2;
}
.actions button:nth-child(2) {
    background:#39a05c;
}
.actions button:nth-child(3) {
    background:#df8d30;
}
.actions button:nth-child(4) {
    background:#7046cc;
}
.actions b,.actions small {
    display:block;
    margin-left:45px;
}
.actions b {
    font-size:16px;
    margin-top:-28px;
}
.actions small {
    font-size:12px;
    margin-top:4px;
}
.content {
    display:grid;
    grid-template-columns:minmax(500px,2fr) minmax(280px,.8fr);
    gap:14px;
    padding:0 16px;
}
.composer,article,.panel {
    background:#fff;
    border:1px solid #dce4ed;
    border-radius:6px;
    padding:15px;
    margin-bottom:14px;
    box-shadow:0 1px 3px #ccd6e0;
}
.composer input {
    width:100%;
    padding:15px;
    border:1px solid #dce4ed;
    background:#f5f8fb;
    border-radius:5px;
    margin-bottom:12px;
}
.composer button,.panel button {
    float:right;
    background:#1976d2;
    color:#fff;
    border:0;
    border-radius:4px;
    padding:8px 18px;
}
article h3 {
    margin:0;
}
article h3 small,article small,.panel small {
    display:block;
    font-weight:normal;
    color:#6380a0;
    font-size:12px;
    margin-top:4px;
}
article p {
    line-height:1.45;
}
.tags {
    display:inline-block;
    background:#edf5fd;
    color:#2363a8;
    padding:8px 12px;
    border-radius:18px;
    font-size:12px;
}
article footer {
    margin-top:16px;
    color:#2569b4;
}
article footer span {
    float:right;
}
.panel h3 {
    margin-top:0;
    color:#172d4c;
}
.panel h3 a {
    float:right;
    color:#1671d3;
    font-size:12px;
    font-weight:normal;
    text-decoration:none;
}
.panel p {
    padding:9px 0;
    margin:0;
    border-bottom:1px solid #e5ebf2;
}
.photo-strip {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
}
.photo-strip div {
    height:85px;
    background:linear-gradient(135deg,#aeb8c1,#5b6874);
    border-radius:3px;
}
.header-account {
  margin-left: auto;
}

.login-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 6px;
  background: #4a6da7;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.login-btn:hover {
  opacity: .9;
}
@media(max-width:900px) {
    .layout {
        grid-template-columns:70px 1fr;
    }
    aside nav a {
        font-size:0;
    }
    aside nav a:first-letter {
        font-size:20px;
    }
    .side-logo,blockquote {
        display:none;
    }
    .actions {
        grid-template-columns:1fr 1fr;
    }
    .content {
        grid-template-columns:1fr;
    }
    .right {
        display:none;
    }
    .brand div {
        display:none;
    }
    .brand {
        min-width:auto;
    }
    .hero h1 {
        font-size:30px;
    }
}