.component-blog-related-posts {
    background-color: #f4f4f4;
    padding: 20px
}

.component-blog-related-posts__title {
    color: #54595f;
    font-size: 24px;
    font-weight: 300;
    margin: 20px auto;
    max-width: 1280px;
    text-transform: uppercase;
    width: 100%
}

.component-blog-related-posts__title:after {
    background-color: #1494fc;
    content: "";
    display: block;
    height: 2px;
    margin-top: 20px;
    width: 66px
}

.component-blog-related-posts__list {
    grid-gap: 20px;
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: 1280px;
    width: 100%
}

@media (min-width: 800px) {
    .component-blog-related-posts__list {
        grid-template-columns:1fr 1fr
    }

    .component-blog-related-posts__list .full-width {
        grid-column: span 2
    }
}

@media (min-width: 1200px) {
    .component-blog-related-posts__list {
        grid-template-columns:1fr 1fr 1fr
    }

    .component-blog-related-posts__list .full-width {
        grid-column: span 3
    }
}

@media (min-width: 800px) and (max-width:1200px) {
    .component-blog-related-posts__list>:nth-child(n+3) {
        display:none
    }
}