/* ============================================================================
   SIDE DRAWINGS of the /pc-samenstellen/ article
   Six decorative line drawings in the margin of the 1120 px article column, from 1440 px.
   Vertical position is a percentage of the article's own height (.pkb-artikel-wrap is
   position: relative), so the drawings follow the text when it gets longer. Left and right
   alternate and no two share a height. Colours: --tekening-lijn / --tekening-tekst.
   ============================================================================ */

.pkb-zijtekeningen {
    display: none;
}

.pkb-tekening {
    stroke: var(--tekening-lijn);
}

@media (min-width: 1440px) {
    .pkb-zijtekeningen {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .pkb-zijtekening {
        position: absolute;
        width: 132px;
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        line-height: 1.4;
        white-space: nowrap;
        color: var(--tekening-tekst);
    }

    .pkb-zijtekening .pkb-tekening {
        display: block;
    }

    .pkb-zijtekening--l {
        left: -146px;
        transform-origin: right top;
    }

    .pkb-zijtekening--r {
        right: -146px;
        text-align: right;
        transform-origin: left top;
    }

    .pkb-zijtekening--r .pkb-tekening {
        margin-left: auto;
    }

    .pkb-zijtekening__maat {
        display: flex;
        justify-content: space-between;
        margin: 0 2px 6px 18px;
        padding-bottom: 2px;
        border-bottom: 1px solid var(--tekening-lijn);
    }

    .pkb-zijtekening__notitie {
        margin-top: 6px;
        padding-inline: 4px;
    }

    /* Positions: share of the article's height. */
    .pkb-zijtekening--gpu { top: 1%; }
    .pkb-zijtekening--cpu { top: 14%; }
    .pkb-zijtekening--ram { top: 33%; }
    .pkb-zijtekening--fan { top: 47%; }
    .pkb-zijtekening--psu { top: 63%; }
    .pkb-zijtekening--m2 { top: 76%; }
}

@media (min-width: 2200px) {
    .pkb-zijtekening {
        transform: scale(1.3);
    }
}

@media (min-width: 3000px) {
    .pkb-zijtekening {
        transform: scale(1.5);
    }
}