:root{
    --page-bg-color: #f9f9fd;
    --primary-text-color: #212121;
    --card-set-gap: 20px;
    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

body{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    background-color: var(--page-bg-color);
    color: var(--primary-text-color);
    line-height: 1.5;
}

h1, h2, h3, h4, p{ 
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.container{
width: 960px;
padding-left: 15px;
padding-right: 15px;
/* height: 200px; */
margin-left: auto;
margin-right: auto;
/* background-color: #ccc; */
}

.card-set{
    /* outline: 1px solid tomato; */
    padding: 0;
    margin: 0;
    list-style: none;

    display: flex;
    flex-wrap: wrap;

    margin-left: calc(-1 * var(--card-set-gap));
    margin-top: calc(-1 * var(--card-set-gap));
}

.card-set >.item{
    /* outline: 1px solid teal; */

    flex-basis: calc(100% / 3 - 20px);

    margin-left: var(--card-set-gap);
    margin-top: var(--card-set-gap);
}

.card-thumb{
    /* outline: 1px solid red; */

}

.item *{
    /* outline: 1px solid tomato; */
}

.card-heading{
    /* margin-top: 10px; */
}

.card-text{
    margin-top: 10px;
}

.card-content{
    padding: 15px;
}


.card{
box-shadow: var(--card-shadow);
border-radius: 4px;
overflow: hidden;
}