.history-layout {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:65px;
    padding-bottom:65px;
    align-items:start
}

.history-emblem img {
    width:100%;
    max-width:430px;
    border-radius:32px;
    background:black
}

.history-notice {
    padding:28px;
    background:var(--silver);
    border-radius:22px
}

.history-notice h2 {
    font-size:2.6rem;
    margin-bottom:18px
}

.history-notice p:last-child {
    font-size:.95rem
}

.timeline {
    list-style:none;
    padding:0;
    margin:35px 0 0
}

.timeline li {
    display:flex;
    gap:24px;
    position:relative;
    padding-bottom:35px
}

.timeline li:not(:last-child):before {
    content:'';
    position:absolute;
    left:25px;
    top:45px;
    bottom:0;
    width:2px;
    background:var(--border)
}

.timeline li>span {
    flex:0 0 52px;
    height:52px;
    display:grid;
    place-items:center;
    background:var(--blue);
    color:white;
    border-radius:50%;
    font-weight:800;
    z-index:1
}

.timeline li:nth-child(2)>span {
    background:var(--red)
}

.timeline h3 {
    margin:5px 0 10px
}

.timeline small {
    display:inline-block;
    margin-top:9px;
    font-size:.78rem;
    background:var(--silver);
    border-radius:20px;
    padding:2px 10px;
    color:#515c70
}

@media(max-width:900px) {

    .history-layout {
        gap:35px
    }

}

@media(max-width:650px) {

    .history-layout {
        grid-template-columns:1fr;
        gap:45px;
        padding-bottom:30px
    }

    .history-emblem img {
        max-width:300px;
        margin:auto
    }

    .history-notice {
        padding:24px
    }

    .history-notice h2 {
        font-size:2.4rem
    }

    .timeline li {
        gap:18px
    }

}