$maxQrCodeSize: 242px;

.qrCode {
    text-align: center;
    width: $maxQrCodeSize;
    margin: 0 auto;

    img {
        width: $maxQrCodeSize;
        height: $maxQrCodeSize;
    }
}

.manualDescription {
    position: relative;
}

.or {
    position: absolute; // Use absolute positioning to put an element between margin
    inset-inline-start: 0; // TODO: doesn't have any effect. Probably can be removed
    width: 100%;
    margin-top: -18px;

    text-align: center;
    font-size: 10px;
    text-transform: capitalize;
}

.key {
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
}

@media screen and (max-width: 359px) {
    .key {
        font-size: 13px;
    }
}
