* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #fafafa;
}

#articles-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: minmax(300px, auto);
    grid-gap: 1em;
    padding: 10px;
}

/* since shadow dom is disabled in web-component, we need to target it by <card-tile> */
card-tile a {
    text-decoration: none;
}

card-tile .card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    padding: 16px;
}

card-tile .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

card-tile .card-container {
    padding: 12px 0 0;
    color: black;
}

card-tile .card img {
    height: 270px;
    object-fit: cover;
}

@media (max-width: 1200px) {
    #articles-grid-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    #articles-grid-wrapper {
        grid-template-columns: 1fr;
    }
}