.related-articles-container {

    margin: 0 auto;
    padding: 0px 20px 20px 20px 20px;
    color: #fff;
}

.related-articles {
    display: flex;
    flex-wrap: wrap;
    gap: 23px;
}

.article-item {
    flex: 0 0 100%;
    background-color: #fff;
    color: #000;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
    flex-direction: column;
    justify-content: end;
}

.article-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
}

.article-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
	height: 277px;
    object-fit: contain;
}

@media screen and (max-width: 369.99px){
	.article-thumbnail img{
		height: 258px;
	}
}

@media screen and (min-width: 370px) and (max-width: 770.98px){
	.article-thumbnail img{
		height: 282px;
	}
}

.article-content {
    padding: 15px 20px;
    text-align: start;
	background: var(--e-global-color-accent);
	height: 133px;
	display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.article-title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.article-title a {
    text-decoration: none;
    color: #000;
	font-size: var(--e-global-typography-ef420ca-font-size);
	font-weight: var(--e-global-typography-ef420ca-font-weight);
    line-height: var(--e-global-typography-ef420ca-line-height);
	font-family: var(--e-global-typography-ef420ca-font-family), Sans-serif;
}

.article-link {
    display: inline-block;
    color: var(--e-global-color-text);
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
	font-family: var(--e-global-typography-3d1e545-font-family), Sans-serif;
	font-weight: var(--e-global-typography-primary-font-weight);
}

.article-link svg{
	width: 18%;
	margin-right: 10px;
}

.related-articles-container .related-articles-title{
	color: var(--e-global-color-a48be78);
    font-family: var(--e-global-typography-925a678-font-family), Sans-serif;
    font-size: var(--e-global-typography-925a678-font-size);
    font-weight: var(--e-global-typography-925a678-font-weight);
    line-height: var(--e-global-typography-925a678-line-height);
}

.article-title a{
	font-family: var(--e-global-typography-ef420ca-font-family), Sans-serif;
    font-size: var(--e-global-typography-ef420ca-font-size);
    font-weight: var(--e-global-typography-ef420ca-font-weight);
    line-height: var(--e-global-typography-ef420ca-line-height);
}

.related-articles-buttons{
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.related-articles-buttons a{
	border-radius: 100px;
	text-transform: uppercase;
	font-family: var(--e-global-typography-3e3e7d2-font-family), Sans-serif;
    font-size: var(--e-global-typography-3e3e7d2-font-size);
    font-weight: var(--e-global-typography-3e3e7d2-font-weight);
    line-height: var(--e-global-typography-3e3e7d2-line-height);
}

.related-articles-buttons .btn-primary{
	background-color: var( --e-global-color-primary );
	border: 1px solid var( --e-global-color-primary );
	color: var (--e-global-color-secondary);
}

.related-articles-buttons .btn-secondary{
	background-color: var( --e-global-color-cf9ceac );
	border: 1px solid var( --e-global-color-secondary );
	color: var ( --e-global-color-secondary );
}

.related-articles-buttons svg{
    position: absolute;
    right: 8px;
}

.article-link svg circle{
    fill: var(--e-global-color-primary);
}

.related-articles-buttons svg circle{
    stroke: var(--e-global-color-secondary);
}

.related-articles-buttons svg path{
	fill: var(--e-global-color-text);
}

@media screen and (min-width: 768px) and (max-width:991.98px){
	.related-articles-buttons a{
		font-size: 13px;
	}
	.article-thumbnail img{
		height: 185px;
	}
	.article-title a{
		font-size: 22px;
	}
	.related-articles-buttons svg{
		right: 5px;
	}
}