#col-qr-code {
    position: relative
}

.qr-code-code {
    position: absolute;
    top: 20%;
    left: 25%;
    height: auto;
    width: 53%
}

.qr-item {
    /* margin: 2em 0; */
    margin: 0 0 2em;
    background: none;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.qr-item::before {
    content: '';
    background-color: #2a8ade;
    mask-size: contain;
    -webkit-mask-size: contain;
    width: 92px;
    height: 92px;
    display: inline-block;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
    margin-right: 1em;
    vertical-align: middle
}


/** eventuell noch .flapping davor? **/
.qr-item:nth-child(2n+0) {
    flex-direction: row-reverse;
}

.qr-item:nth-child(2n+0)::before {
    margin-right: 0;
    margin-left: 1em;
}



.qr-01::before { mask-image: url(qr-01.svg);-webkit-mask-image: url(qr-01.svg); }
.qr-02::before { mask-image: url(qr-02.svg);-webkit-mask-image: url(qr-02.svg); }
.qr-03::before { mask-image: url(qr-03.svg);-webkit-mask-image: url(qr-03.svg); }
.qr-04::before { mask-image: url(qr-04.svg);-webkit-mask-image: url(qr-04.svg); }
.qr-05::before { mask-image: url(qr-05.svg);-webkit-mask-image: url(qr-05.svg); }
.qr-06::before { mask-image: url(qr-06.svg);-webkit-mask-image: url(qr-06.svg); }