@import url("../tokens.css");

.product-page {


    /* test
================================================*/
    .card-item {
        display: flex;
        flex-direction: column;
        max-width: 50%;
        margin: 0 auto 40px;
        border: var(--c-border) 2px solid;
        border-radius: 10px;
        overflow: hidden;

        position: relative;
        padding: 0 0 40px;
    }

    .card-item__text {
        text-align: left;
        padding: 10px;
    }


    a[target="_blank"]::after {
        position: absolute;
        right: 15px;
        bottom: 20px;

        content: "";
        display: inline-block;
        width: 20px;
        height: 20px;
        -webkit-mask-image: url("/img/icon-external.svg");
        mask-image: url("/img/icon-external.svg");
        -webkit-mask-size: contain;
        mask-size: contain;
        background-color: var(--c-muted);
    }


    /* SP
================================================*/

    @media screen and (max-width: 760px) {
        .card-item {
            max-width: 100%;
        }
    }
}