Разработка Отзывчивый макет сетки

$c: #ee8c35, #ad4716;
$c0: rgba(#fff, .8);

$art-lh: 1.25;
$hd3-fs: 1.5rem;
$hd4-fs: 1rem;
$hd4-lh: 3;
$par-pv: .75rem;

// WIDE CASE
$art-pv-wide: .75rem;

$hd3-mv-wide: -3*$art-pv-wide;

$hd4-b-wide: .1875rem;

$row-1-wide: $hd4-lh*$hd4-fs + 2*$hd4-b-wide;
$row-2-wide: 4*$art-lh*1rem + 2*$par-pv;
$col-a-wide: 17.5rem;
$col-b-wide: $row-1-wide + $row-2-wide - 2*$hd3-mv-wide;
$col-1-wide: calc(var(--q)*#{$col-a-wide} + var(--p)*#{$col-b-wide});
$col-2-wide: calc(var(--q)*#{$col-b-wide} + var(--p)*#{$col-a-wide});

$art-g-wide: 2rem;
$art-b-wide: .1875rem;
$art-ph-wide: 2*$art-g-wide;
$art-mv-wide: -1.5*$hd3-mv-wide;
$art-w-wide: $col-a-wide + $col-b-wide +
                         $art-g-wide + 2*($art-ph-wide + $art-b-wide);
$art-h-wide: $row-1-wide + $row-2-wide +
                         2*$art-ph-wide + 2*$art-b-wide;
$art-r-wide: .5*$art-h-wide;
$art-sh-wide: 1em;

$hd3-pv-wide: -$hd3-mv-wide;
$hd3-r-wide: 50%;
$hd3-r0-wide: calc(var(--q)*#{$hd3-r-wide});
$hd3-r1-wide: calc(var(--p)*#{$hd3-r-wide});
$num-f-wide: 4;

$hd4-r-wide: .375*$row-1-wide;

// NORM CASE
$hd3-lh-norm: 3;

$row-1-norm: $hd3-lh-norm*$hd3-fs;
$row-2-norm: $hd4-lh*$hd4-fs;
$col-1-norm: 100%;

$art-mv-norm: 1em;
$art-p-norm: 2vw;
$art-w-norm: 100%;
$art-sh-norm: .375em;

$num-f-norm: 1;

$hd4-w-norm: 50%;
$hd4-r-norm: .5*$row-2-norm;

$par-pl-norm: 2.5em;
$par-ti-norm: 2em;

// UNIF CASE
$row-1: calc(var(--i)*#{$row-1-wide} + var(--j)*#{$row-1-norm});
$row-2: calc(var(--i)*#{$row-2-wide} + var(--j)*#{$row-2-norm});
$row-3: minmax(0, auto);
$col-1: calc(var(--i)*#{$col-1-wide} + var(--j)*#{$col-1-norm});
$col-2: calc(var(--i)*#{$col-2-wide});

$art-g: calc(var(--i)*#{$art-g-wide});
$art-mv: calc(var(--i)*#{$art-mv-wide} + var(--j)*#{$art-mv-norm});
$art-b: calc(var(--i)*#{$art-b-wide});
$art-pv: calc(var(--i)*#{$art-pv-wide} + var(--j)*#{$art-p-norm});
$art-ph: calc(var(--i)*#{$art-ph-wide} + var(--j)*#{$art-p-norm});
$art-w: calc(var(--i)*#{$art-w-wide} + var(--j)*#{$art-w-norm});
$art-r: calc(var(--i)*#{$art-r-wide});
$art-sh: calc(var(--i)*#{$art-sh-wide} + var(--j)*#{$art-sh-norm});

$hd3-mv: calc(var(--i)*#{$hd3-mv-wide});
$hd3-pv: calc(var(--i)*#{$hd3-pv-wide});
$hd3-r0: calc(var(--i)*#{$hd3-r0-wide});
$hd3-r1: calc(var(--i)*#{$hd3-r1-wide});
$hd3-lh: calc(var(--i) + var(--j)*#{$hd3-lh-norm});
$num-f: calc(var(--i)*#{$num-f-wide} + var(--j)*#{$num-f-norm});

$hd4-b: calc(var(--i)*#{$hd4-b-wide});
$hd4-w: calc(100% - var(--k)*#{$hd4-w-norm});
$hd4-r: calc(var(--i)*#{$hd4-r-wide} + var(--j)*#{$hd4-r-norm});

$par-pl: calc(var(--k)*#{$par-pl-norm});
$par-ti: calc(var(--k)*#{$par-ti-norm});

*, :before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    --i: var(--wide, 1);
    --j: calc(1 - var(--i));
    --k: calc(1 - var(--narr, 0));
    height: 100%;
    /* test background *
    background:
        repeating-linear-gradient(-45deg,
                gainsboro 0, gainsboro 2px,
                transparent 0, transparent 5px);
    /* live background */
    background: linear-gradient($c0, $c0),
        url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/kreator_rockharz_july_2018.jpg)
            50%/ cover fixed;/**/
    font: 400 1em/ #{$art-lh} trebuchet ms, arial, sans-serif;
    
    @media (max-width: $art-w-wide + 2rem) { --wide: 0 }
    
    @media (max-width: 350px) { --narr: 1 }
    
    @media (max-width: 240px) { font-size: .75em }
}

article {
    --p: var(--parity, 0);
    --q: calc(1 - var(--p));
    --s: calc(1 - 2*var(--p));
    display: grid;
    grid-template: #{$row-1} #{$row-2} #{$row-3}/ #{$col-1} #{$col-2};
    grid-gap: 0 $art-g;
    grid-auto-flow: column dense;
    margin: $art-mv auto;
    border: solid $art-b transparent;
    padding: $art-pv $art-ph;
    width: $art-w;
    border-radius: $art-r;
    box-shadow: $art-sh $art-sh calc(3*#{$art-sh}) rgba(#000, .5);
    background:
        linear-gradient(calc(var(--s)*90deg), #e6e6e6, #ececec) padding-box,
        linear-gradient(to right bottom, #fff, #c8c8c8) border-box;
    counter-increment: idx;
    
    &:nth-child(2n) { --parity: 1 }
}

h3 {
    grid-column: calc(1 + var(--i)*var(--q));
    grid-row: 1/ span calc(1 + 2*var(--i));
    margin: $hd3-mv 0;
    border: solid $art-b transparent;
    padding: $hd3-pv $hd3-pv;
    border-radius: $hd3-r0 $hd3-r1;
    box-shadow: inherit;
    background:
        linear-gradient(calc(var(--s)*45deg), $c) padding-box,
        linear-gradient(calc(var(--s)*-45deg), $c) border-box;
    color: #fff;
    font-size: $hd3-fs;
    font-weight: 400;
    line-height: $hd3-lh;
    text-align: center;
    
    &:before {
        font-size: calc(#{$num-f}*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 $hd4-b nth($c, 1);
    width: $hd4-w;
    border-radius: $hd4-r;
    color: nth($c, 2);
    text-transform: capitalize;
    
    &: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: $par-pv 0;
    padding-left: $par-pl;
    text-indent: $par-ti;
}