@font-face {
    font-family  : 'Roboto';
    src          : url('../fonts/Roboto-Regular.woff2') format('woff2'),
    url('../fonts/Roboto-Regular.woff') format('woff');
    font-weight  : normal;
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family  : 'Roboto';
    src          : url('../fonts/Roboto-Bold.woff2') format('woff2'),
    url('../fonts/Roboto-Bold.woff') format('woff');
    font-weight  : bold;
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family  : 'Roboto';
    src          : url('../fonts/Roboto-Black.woff2') format('woff2'),
    url('../fonts/Roboto-Black.woff') format('woff');
    font-weight  : 900;
    font-style   : normal;
    font-display : swap;
}

body {
    background-color : #3c3f41;
    overflow         : hidden;
    color            : #ffffff;
    font-family      : Roboto, sans-serif;
}

.item {
    width                 : 100%;
    width                 : 100vw;
    min-height            : 100vh;
    max-height            : 100%;
    display               : grid;
    grid-template-columns : 60% 40%;
}

.pimage {
    position            : relative;
    justify-self        : stretch;
    align-self          : stretch;
    height              : 100%;
    background-repeat   : no-repeat, no-repeat;
    background-size     : contain, cover;
    background-position : center center, center center;
    background-color    : #272822;
    -webkit-box-shadow  : 8px 0px 8px 0px rgba(0, 0, 0, 0.27);
    box-shadow          : 8px 0px 8px 0px rgba(0, 0, 0, 0.27);
}

.pinfo {
    justify-self   : stretch;
    align-self     : stretch;
    padding        : 4rem;
    max-height     : 100vh;
    display        : flex;
    flex-direction : column;
}

.current-price {
    font-size   : 9rem;
    line-height : 7.5rem;
    font-weight : 900;
}

.price {
    font-size  : 4rem;
    font-style : italic;
    color      : #f39524;
}

.ptitle {
    max-width     : 100%;
    overflow-wrap : normal;
    margin-top    : 2rem;
    font-size     : 4rem;
    line-height   : 5rem;
}

.desc {
    max-width  : 100%;
    margin-top : 3rem;
    font-size  : 2rem;
    overflow   : hidden;
}

.qr-code {
    position : absolute;
    top      : 20px;
    right    : 0;
    width    : 300px;
}