.related-articles {
    & .topbar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        & .title {
            color: #393939;
            font-family: Synonym;
            font-size: 32px;
            font-style: normal;
            font-weight: 500;
            line-height: 125%;
        }

        & .overview-link {
            color: #393939;
            font-family: Synonym;
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 100%;
            transition: .2s linear;

            & svg path {
                fill: #393939;
            }
            
            &:hover {
                opacity: 0.6;
            }
        }
    }

    & .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;

        & .related-article {
            display: flex;
            flex-direction: column;
            transition: .2s linear;

            &:hover {
                transform: scale(1.05);
            }

            & .banner-image,
            & .banner-image img {
                width: 100%;
                height: 275px;
                object-fit: cover;
                object-position: center;
                border-radius: 4px;
                margin-bottom: 24px;
            }

            & .title {
                font-size: 24px;
                font-style: normal;
                font-weight: 500;
                line-height: 150%;
                font-family: Synonym;
                color: #393939;
                margin: 0 0 12px 0;
            }

            & .description {
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 150%;
                font-family: Synonym;
                color: #5A5A5A;
                margin: 0;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

@media (max-width: 1100px) {
    .related-articles {
        & .container {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        & .topbar {
            flex-direction: column;
            justify-content: start;
            align-items: start;
            margin-bottom: 30px;
        }
    }
}