.article--relatedWeblogPosts {
    max-width: none;
    padding: 5em 0 2em;
    background: rgba(15, 19, 51, 0.05);
}

.article--relatedWeblogPosts .article__content {
    max-width: calc(1200px + 1.5rem);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.relatedWeblogPosts__post {
    position: relative;
    margin: 0 0 2rem 0;
}

.relatedWeblogPosts__imageColumn {
    overflow: hidden;
}

.relatedWeblogPosts__post:hover .relatedWeblogPosts__image {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.relatedWeblogPosts__image {
    display: block;
    background: var(--neutralsLight);
    transition: transform 500ms linear;
}

.relatedWeblogPosts__tagWrapper {
    position: absolute;
    top: .6em;
    left: .6em;
    z-index: 1;
}

.relatedWeblogPosts__tag {
    font-size: .8em;
}

.relatedWeblogPosts__tag {
    display: inline-block;
    vertical-align: middle;
    min-width: 3em;
    padding: .5em .7em;
    line-height: 1.5rem;
    color: var(--neutralsWhite);
    background: linear-gradient(to right, var(--primaryBlueLightBlue), var(--primaryBlueDarkBlue));
}

.relatedWeblogPosts__tag--artikel,
.relatedWeblogPosts__tag--video {
    background: linear-gradient(to right, var(--primaryRedPink), var(--primaryRedPurple));
}

.relatedWeblogPosts__tag--opinie {
    background: linear-gradient(to right, var(--primaryGreenLight), var(--primaryGreenDark));
}

.relatedWeblogPosts__tag--podcast {
    background: linear-gradient(to right, var(--primaryBlueLightBlue), var(--primaryBlueDarkBlue));
}

.postListIntroTheme__tag--artikel,
.relatedWeblogPosts__tag--podcast,
.relatedWeblogPosts__tag--video,
.relatedWeblogPosts__tag--opinie {
    text-indent: -9999em;
}

.postListIntroTheme__tag--artikel,
.relatedWeblogPosts__tag--podcast:before,
.relatedWeblogPosts__tag--video:before,
.relatedWeblogPosts__tag--opinie:before {
    position: absolute;
    top: .9em;
    left: .9em;
    text-indent: 0;
    line-height: 1;
}

.postListIntroTheme__tag--artikel:before {
    content: url('../icons/article-icon.svg');
}

.relatedWeblogPosts__tag--podcast:before {
    content: url('../icons/podcast-icon.svg');
}

.relatedWeblogPosts__tag--video:before {
    content: url('../icons/video-icon.svg');
}

.relatedWeblogPosts__tag--opinie:before {
    content: url('../icons/opinion-icon.svg');
}

.relatedWeblogPosts__textColumn {
    padding: 1.5em 0 3em;
}

.relatedWeblogPosts__title {
    font-size: 1.3rem;
    line-height: 1.4;
}

.relatedWeblogPosts__label {
    display: inline-block;
    margin: .5em .2em 0 0;
    padding: .3em .6em;
    line-height: 1.2;
    background: var(--neutralsLight);
}

.relatedWeblogPosts__label--active {
    color: var(--neutralsWhite);
    background: var(--primaryBrandRegular);
}

.relatedWeblogPosts__readMoreButton {
    position: absolute;
    bottom: 0;
    right: 0;
}

.relatedWeblogPosts__post:hover .relatedWeblogPosts__readMoreButton {
    color: var(--neutralsWhite);
    background: linear-gradient(to left, var(--primaryBrandRegular), var(--primaryBrandLight));
}

.relatedWeblogPosts__post:hover .relatedWeblogPosts__readMoreButton:before {
    background: var(--neutralsWhite);
}

.relatedWeblogPosts__post:hover .relatedWeblogPosts__readMoreButton:after {
    border-left-color: var(--primaryBrandRegular);
}

.relatedWeblogPosts__readMoreUrl {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

@media (min-width: 600px) {
    .relatedWeblogPosts {
        display: flex;
        flex-wrap: wrap;
        margin-left: -2rem;
    }

    .relatedWeblogPosts__post {
        flex-basis: calc(50% - 2rem);
        margin-left: 2rem;
        margin-bottom: 2rem;
    }

    .relatedWeblogPosts__tag {
        font-size: .9em;
    }
}

@media (min-width: 800px) {
    .relatedWeblogPosts__post {
        flex-basis: calc(25% - 2rem);
    }
}

@media (min-width: 1250px) {
    .article--relatedWeblogPosts .article__content {
        padding: 0;
    }
}
