html {
    --i: var(--wide, 1);
    --j: calc(1 - var(--i));
    --k: calc(1 - var(--narr, 0));
}

article {
    --p: var(--parity, 0);
    --q: calc(1 - var(--p));
    --s: calc(1 - 2 * var(--p));
    display: grid;
    grid-template: calc(var(--i) * 3.375rem + var(--j) * 4.5rem) calc(var(--i) * 6.5rem + var(--j) * 3rem) minmax(0, auto)/ calc(var(--i) * calc(var(--q) * 30.5rem + var(--p) * 14.375rem) + var(--j) * 100%) calc(var(--i) * calc(var(--q) * 14.375rem + var(--p) * 30.5rem));
    grid-gap: 0 calc(var(--i) * 2rem);
    grid-auto-flow: column dense;
    margin: calc(var(--i) * 3.375rem + var(--j) * 1em) auto;
    border: solid calc(var(--i) * 0.1875rem) transparent;
    padding: calc(var(--i) * 0.75rem + var(--j) * 2vw) calc(var(--i) * 4rem + var(--j) * 2vw);
    width: calc(var(--i) * 55.25rem + var(--j) * 100%);
    border-radius: calc(var(--i) * 9.125rem);
    box-shadow: calc(var(--i) * 1em + var(--j) * 0.375em) calc(var(--i) * 1em + var(--j) * 0.375em) calc(3 * calc(var(--i) * 1em + var(--j) * 0.375em)) rgba(0, 0, 0, 0.5);
    background: linear-gradient(calc(var(--s) * 90deg), #e6e6e6, #ececec) padding-box, linear-gradient(to right bottom, #fff, #c8c8c8) border-box;
    counter-increment: idx;
}

article:nth-child(2n) {
    --parity: 1;
}

article:nth-child(2n) h4 {
    margin-left: 50%;
}

h3 {
    grid-column: calc(1 + var(--i) * var(--q));
    grid-row: 1/span calc(1 + 2 * var(--i));
    margin: calc(var(--i) * -2.25rem) 0;
    border: solid calc(var(--i) * 0.1875rem) transparent;
    padding: calc(var(--i) * 2.25rem) calc(var(--i) * 2.25rem);
    border-radius: calc(var(--i) * calc(var(--q) * 50%)) calc(var(--i) * calc(var(--p) * 50%));
    box-shadow: inherit;
    background: linear-gradient(calc(var(--s) * 45deg), #003B5C, #00B5E2) padding-box, linear-gradient(calc(var(--s) * -45deg), #003B5C, #00B5E2) border-box;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: calc(var(--i) + var(--j) * 3);
    text-align: center;
}

h3:before {
    font-size: calc(calc(var(--i) * 4 + var(--j) * 1) * 1em);
    font-weight: 900;
    text-shadow: -2px -1px #999;
    content: counter(idx, decimal-leading-zero) " ";
}

h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid calc(var(--i) * 0.1875rem) #00B5E2;
    width: calc(100% - var(--k) * 50%);
    border-radius: calc(var(--i) * 1.265625rem + var(--j) * 1.5rem);
    color: #003B5C;
    text-transform: capitalize;
    font: 400 1.25em/ 1.25 SansProRl;
    margin: 0;
}

h4:before {
    margin-right: .25em;
    border: solid 2px currentcolor;
    width: 1em;
    height: 1em;
    font-size: 1.75em;
    line-height: .8125;
    border-radius: 50%;
    text-align: center;
    content: "+";
}

p {
    padding: 0.15rem 0;
    padding-left: calc(var(--k) * 0.5em);
    text-indent: calc(var(--k) * 2em);
    text-align: justify;
}

@media (max-width: 44.25rem) {
    html {
        --wide: 0;
    }

    p {
        padding: 0.75rem;
        text-align: justify;
    }
}

@media (max-width: 350px) {
    html {
        --narr: 1;
    }
}

@media (max-width: 240px) {
    html {
        font-size: 0.75em;
    }
}