.card {
    display: inline-block;
    position: relative;

    width: calc(var(--vw) * 0.3);
    max-width: 300px;
    aspect-ratio: 1 / 1.5;

    margin: 2% 2%;
    padding: 0;

    text-shadow: 2px 0 black,
                 0 2px black;

    .market_link {
        position: absolute;

        width: fit-content;
        
        padding: 2px 5px;
        padding-bottom: 5px;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        background-image: repeating-linear-gradient(0deg, rgba(95, 0, 0, 0.696), rgba(199, 21, 21, 0.749) 2px, transparent 2px, transparent);
        background-size: 3px 2px;
        background-color: rgba(34, 6, 6, 0.8);

        border-radius: min(calc(var(--vw) * 0.01), 11px);
        border-image-slice: 6;
        border-image-width: min(calc(var(--vw) * 0.008), 20px);
        border-image-repeat: round;
        border-style: solid;
        border-color: transparent;
        border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAFF3D5OAAAAAXNSR0IB2cksfwAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+oIHBEgMP8N7OsAAAJPSURBVEhL3Zc9S1xBFIbnDkkICjZZIRFdUTRgEVIYCHbW/gIt7O1SWoql/8Dewn9gnZRCrMQmgQRXSApXsFFUhOs+5/peZ+/umLmLWGQK5+OcO+frPe+OznXG2uT7fLM5nbN2S+51sbgX+N/adeZ3+a3znyZmy6O/2QuXsSu/D7QHWeKLnwt8CC/pMR8KF0dvHlxh8/X0lcnxcfv4R2Z+fpsft/B220MmnGu87O+m+SDtqorX3T2CWMweL/oNH/siW2i8zT8Oj5h8pXFpM3YtDg3cnOpsqBKFOTv56d7cz5wtN8cK1dWJDznJjZmrnhN61LfHLvG4IH9TrFGKwSwRYKwS/SwbfiRITcZG61cBHQbdsT7fMKtUlDjxn1lnYA3dro/C+rAOa4bysL8uQIqFPXfVVeRYFqnpTHbh/GdVOSHflAfXo4jsdweQsuzxJ3WUlujG1EFyyKZXh6Z8CPJJv6+Du++dRODZYJaeLxF1EA6stg7aBc/F2CuWUcMcbSFUEyMZEsKZOdtv/XHCaA9QAXBzsmmKDF0QXqY1cl0aGlIrwc5fDo662ykFEKk60CfgoYvkgLUgEbSOW2WYqRf+Sw+DcLIBT12FsaceIEEReUG9DmhTHRIJW9NilYLW6fhUQ9QJ4rJGV+rqsESqIf2AGUuKxOowS6ohghD8ny+i/w8M+s2ow5SpNSJbJV3BDBAkzJr6fkg1hJ4e30Z4IZGG5IgsfH9U18j1NpEMKuORoLewnOpibx6c5+1ze5toVN8temPqv4JwX13vnByW998B0bFada9SBrsAAAAASUVORK5CYII=");

        color: var(--highlights_text);

        span {
            font-size: clamp(1.2em, calc(var(--vw) * 0.04), 1.5em);
            mix-blend-mode: color-dodge;
            text-decoration: underline;
        }
    }

    .inner_card {
        display: flex;
        flex-direction: column;

        width: 100%;
        height: 100%;
        
        padding: calc(var(--vw) * 0.002) 0;

        .card_title {
            flex: 0 0 auto;
            
            font-family: gothic;
            font-size: clamp(1.5em, calc(var(--vw) * 0.03), 2em);
            
            border-radius: min(calc(var(--vw) * 0.01), 11px);
            border-image-slice: 6;
            border-image-width: min(calc(var(--vw) * 0.008), 20px);
            border-image-repeat: round;
            border-style: solid;
            border-color: transparent;
            border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAFF3D5OAAAAAXNSR0IB2cksfwAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+oIHBEgMP8N7OsAAAJPSURBVEhL3Zc9S1xBFIbnDkkICjZZIRFdUTRgEVIYCHbW/gIt7O1SWoql/8Dewn9gnZRCrMQmgQRXSApXsFFUhOs+5/peZ+/umLmLWGQK5+OcO+frPe+OznXG2uT7fLM5nbN2S+51sbgX+N/adeZ3+a3znyZmy6O/2QuXsSu/D7QHWeKLnwt8CC/pMR8KF0dvHlxh8/X0lcnxcfv4R2Z+fpsft/B220MmnGu87O+m+SDtqorX3T2CWMweL/oNH/siW2i8zT8Oj5h8pXFpM3YtDg3cnOpsqBKFOTv56d7cz5wtN8cK1dWJDznJjZmrnhN61LfHLvG4IH9TrFGKwSwRYKwS/SwbfiRITcZG61cBHQbdsT7fMKtUlDjxn1lnYA3dro/C+rAOa4bysL8uQIqFPXfVVeRYFqnpTHbh/GdVOSHflAfXo4jsdweQsuzxJ3WUlujG1EFyyKZXh6Z8CPJJv6+Du++dRODZYJaeLxF1EA6stg7aBc/F2CuWUcMcbSFUEyMZEsKZOdtv/XHCaA9QAXBzsmmKDF0QXqY1cl0aGlIrwc5fDo662ykFEKk60CfgoYvkgLUgEbSOW2WYqRf+Sw+DcLIBT12FsaceIEEReUG9DmhTHRIJW9NilYLW6fhUQ9QJ4rJGV+rqsESqIf2AGUuKxOowS6ohghD8ny+i/w8M+s2ow5SpNSJbJV3BDBAkzJr6fkg1hJ4e30Z4IZGG5IgsfH9U18j1NpEMKuORoLewnOpibx6c5+1ze5toVN8temPqv4JwX13vnByW998B0bFada9SBrsAAAAASUVORK5CYII=");

            image-rendering: pixelated;
            mix-blend-mode: color-dodge;

            .card_cost {
                float: right;
                text-align: center;

                width: 1.8rem;
                aspect-ratio: 1 / 1;

                margin-right: 1%;
                
                background: rgb(255, 0, 0);
                
                border-radius: 50%;
                
                line-height: 1.3rem;
            }
        }

        .card_image {
            flex: 2 1 0;
            
            width: 95%;
            min-height: 0;
            
            margin: 0 auto;
            
            overflow: hidden;

            border-radius: min(calc(var(--vw) * 0.01), 11px);
            border-image-slice: 6;
            border-image-width: min(calc(var(--vw) * 0.008), 20px);
            border-image-repeat: round;
            border-style: solid;
            border-color: transparent;
            border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAFF3D5OAAAAAXNSR0IB2cksfwAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+oIHBEgMP8N7OsAAAJPSURBVEhL3Zc9S1xBFIbnDkkICjZZIRFdUTRgEVIYCHbW/gIt7O1SWoql/8Dewn9gnZRCrMQmgQRXSApXsFFUhOs+5/peZ+/umLmLWGQK5+OcO+frPe+OznXG2uT7fLM5nbN2S+51sbgX+N/adeZ3+a3znyZmy6O/2QuXsSu/D7QHWeKLnwt8CC/pMR8KF0dvHlxh8/X0lcnxcfv4R2Z+fpsft/B220MmnGu87O+m+SDtqorX3T2CWMweL/oNH/siW2i8zT8Oj5h8pXFpM3YtDg3cnOpsqBKFOTv56d7cz5wtN8cK1dWJDznJjZmrnhN61LfHLvG4IH9TrFGKwSwRYKwS/SwbfiRITcZG61cBHQbdsT7fMKtUlDjxn1lnYA3dro/C+rAOa4bysL8uQIqFPXfVVeRYFqnpTHbh/GdVOSHflAfXo4jsdweQsuzxJ3WUlujG1EFyyKZXh6Z8CPJJv6+Du++dRODZYJaeLxF1EA6stg7aBc/F2CuWUcMcbSFUEyMZEsKZOdtv/XHCaA9QAXBzsmmKDF0QXqY1cl0aGlIrwc5fDo662ykFEKk60CfgoYvkgLUgEbSOW2WYqRf+Sw+DcLIBT12FsaceIEEReUG9DmhTHRIJW9NilYLW6fhUQ9QJ4rJGV+rqsESqIf2AGUuKxOowS6ohghD8ny+i/w8M+s2ow5SpNSJbJV3BDBAkzJr6fkg1hJ4e30Z4IZGG5IgsfH9U18j1NpEMKuORoLewnOpibx6c5+1ze5toVN8temPqv4JwX13vnByW998B0bFada9SBrsAAAAASUVORK5CYII=");

            image-rendering: pixelated;
            mix-blend-mode: color-dodge;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .card_type {
            flex: 0 0 auto;
            
            margin: 2px 5px;

            font-size: clamp(1.3em, calc(var(--vw) * 0.02), 1.5em);
            line-height: 0.8;

            background: rgba(88, 0, 0, 0.849);
            background-blend-mode: color-dodge;
            
            border-radius: min(calc(var(--vw) * 0.01), 11px);
            border-image-slice: 6;
            border-image-width: min(calc(var(--vw) * 0.008), 20px);
            border-image-repeat: round;
            border-style: solid;
            border-color: transparent;
            border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAFF3D5OAAAAAXNSR0IB2cksfwAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+oIHBEgMP8N7OsAAAJPSURBVEhL3Zc9S1xBFIbnDkkICjZZIRFdUTRgEVIYCHbW/gIt7O1SWoql/8Dewn9gnZRCrMQmgQRXSApXsFFUhOs+5/peZ+/umLmLWGQK5+OcO+frPe+OznXG2uT7fLM5nbN2S+51sbgX+N/adeZ3+a3znyZmy6O/2QuXsSu/D7QHWeKLnwt8CC/pMR8KF0dvHlxh8/X0lcnxcfv4R2Z+fpsft/B220MmnGu87O+m+SDtqorX3T2CWMweL/oNH/siW2i8zT8Oj5h8pXFpM3YtDg3cnOpsqBKFOTv56d7cz5wtN8cK1dWJDznJjZmrnhN61LfHLvG4IH9TrFGKwSwRYKwS/SwbfiRITcZG61cBHQbdsT7fMKtUlDjxn1lnYA3dro/C+rAOa4bysL8uQIqFPXfVVeRYFqnpTHbh/GdVOSHflAfXo4jsdweQsuzxJ3WUlujG1EFyyKZXh6Z8CPJJv6+Du++dRODZYJaeLxF1EA6stg7aBc/F2CuWUcMcbSFUEyMZEsKZOdtv/XHCaA9QAXBzsmmKDF0QXqY1cl0aGlIrwc5fDo662ykFEKk60CfgoYvkgLUgEbSOW2WYqRf+Sw+DcLIBT12FsaceIEEReUG9DmhTHRIJW9NilYLW6fhUQ9QJ4rJGV+rqsESqIf2AGUuKxOowS6ohghD8ny+i/w8M+s2ow5SpNSJbJV3BDBAkzJr6fkg1hJ4e30Z4IZGG5IgsfH9U18j1NpEMKuORoLewnOpibx6c5+1ze5toVN8temPqv4JwX13vnByW998B0bFada9SBrsAAAAASUVORK5CYII=");

            mix-blend-mode: color-dodge;
            image-rendering: pixelated;
        }

        .card_desc {
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
            /* justify-content: center;
            align-items: center; */

            width: 94%;
            min-height: 0;
            
            margin: 3% auto;
            padding: 2% 0;

            overflow: auto;
            
            box-shadow: inset 0 -5px 10px var(--sub_title_shadow_color),
                        inset 0 5px 10px var(--sub_title_shadow_color),
                        0 -10px 5px var(--sub_title_shadow_color),
                        0 10px 10px var(--sub_title_shadow_color);

            font-size: clamp(1em, calc(var(--vw) * 0.02), 1.4em);
            line-height: 0.8;
            
            mix-blend-mode: color-dodge;

            p {
                margin-bottom: 10px;
            }
        }
    }
}