.JobArticleCard {
    display: block;
    text-decoration: none;
    padding: 20px 15px 15px 15px;
    border: 1px solid #ccc;

    .RowSection {
        height: 100%;
        display: grid;
        gap: 15px;
        grid-template-rows: auto auto 1fr;

        .TitleBox {
            display: grid;
            column-gap: 20px;
            row-gap: 5px;
            grid-template-columns: 120px 1fr;
            grid-template-areas: "Img Title" 
                                 "Img Content";

            .Img {
                width: 100%;
                aspect-ratio: 16/9;
                object-fit: cover;
                background-color: #ccc;
                grid-area: Img;
            }
            .Title {
                font-size: 1.3em;
                font-weight: bold;
                color: #555;
            }
            .Content {
                font-size: 1em;
                color: #777;

                /* 表示行数を制限する */
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 4;
                overflow: hidden;
                line-clamp: 4;
            }
        }
        .AttrBox {
            display: grid;
            gap: 10px;
            grid-template-columns: 1fr 1fr 1fr;
            font-size: 0.9em;

            .Label {
                color: #555;
            }
            .Content {
                color: #777;
            }
        }
        .MessageBox {
            font-size: 0.8em;
            text-align: right;
            color: #999;
            align-content: end;
        }
    }
}