.grid {
    display: grid;
    grid-template-columns: 1fr .9fr;
    grid-template-rows: .5fr 2fr .5fr;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 10px 100px;
    grid-auto-flow: row;
    grid-template-areas: "s f" "l-s l" "c-s c";
}

.grid ul {
    padding: 0;
}

.grid li {
    margin-bottom: 8px;
}

@media (max-width: 960px) {
    .grid {
        display: flex;
        flex-direction: column;
    }
}

.l-s {
    grid-area: l-s;
}

.l-s svg {
    max-width: 100%;
    height: auto;
}

.s {
    grid-area: s;
}

.f {
    grid-area: f;
}

.l {
    display: grid;
    align-items: start;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: "m-l" "h-l";
    grid-area: l;
    border-bottom: 1px solid var(--b-c);
}

.h-l {
    grid-area: h-l;
}

.m-l {
    grid-area: m-l;
}

.c-s {
    grid-area: c-s;
}

.c {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: "f-us s-l";
    grid-area: c;
}

.f-us {
    grid-area: f-us;
}

.s-l {
    grid-area: s-l;
}

button,
.button,
a.button {
    display: inline-block;
    background: transparent;
    color: inherit;
    width: 120px;
    padding: 1rem 1rem;
    transition: all .5s ease;
    text-align: center;
    line-height: 1;
    outline: none;
    border-top: solid 1px;
    border-right: solid 2px;
    border-left: solid 1px;
    border-bottom: solid 2px;
    box-shadow: 20px 38px 34px -26px hsla(0, 0%, 0%, .2);
}

button,
.button,
a.button:hover {
    box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
}

button,
.button,
a.button.small {
    width: 25px;
    height: 25px;
    line-height: normal;
}

sup {
    border-top: solid 1px;
    border-right: solid 2px;
    border-left: solid 1px;
    border-bottom: solid 2px;
    padding: 0rem .3rem;
    font-size: 1rem;
    letter-spacing: normal;
    line-height: 1.5;
}