.bg_metro
{
    background-image: url(../images/metro.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.articleCard
{
    height: 240px;
    background-color: white;
    margin-bottom: 20px;
    display: flex;
    gap: 24px;
    padding: 24px;
    transition: all .3s ease;
    box-shadow: none;
}
.articleCard:hover
{
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}
.articleCard:hover .leftPic
{
    transform: scale(1.02);
}
.articleCard .text
{
    width: 460px;
    display: flex;
    align-items: center;
}
.leftPic
{
    border-radius: 20px;
    height: 196px;
    transform: scale(1);
    transition: all .3s ease;
}



.rightArrow
{
    border-radius: 20px;
    height: 196px;
    width: 64px;
    background-color: #cfdefe;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease;
}
.rightArrow:hover
{
    background-color: #a6c2ff;
    cursor: pointer;
}
.rightArrow i
{
    font-size: 40px;
    color: rgb(114, 135, 145);
    cursor: pointer;
}