.article-links {
    .articles {
        .article {
            display: flex;
            flex-direction: column;

            .article-image {
                width: 100%;
                border-radius: 30px;
                overflow: hidden;
                margin-bottom: 2rem;
                
                &.size-small {
                    width: 120px;
                    height: 84px;
                }
                &.size-large {
                    aspect-ratio: 410 / 250;
                }
                a {
                    display: block;
                    width: 100%;
                    height: 100%;

                    &:hover, &:focus-visible {
                        img {
                            transform: scale(1.1);
                        }
                    }
                }
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: .5s ease;
                }
            }
            .article-title {
                font-size: 1.6rem;
                line-height: 1.5;

                a {
                    color: var(--color-white);
                    
                    &:hover, &:focus-visible {
                        text-decoration: underline;
                    }
                }
            }
            .read-link {
                font-size: 1.8rem;
                padding-top: 2rem;
                margin-top: auto;

                @media screen and (max-width: 1199px) {
                    padding-top: 1rem;
                }
                @media screen and (max-width: 991px) {
                    padding-top: 2rem;
                }
                @media screen and (max-width: 576px) {
                    padding-top: 1rem;
                }
                a {
                    position: relative;
                    display: inline;
                    padding-right: 25px;
                    color: var(--color-white);

                    &:hover, &:focus-visible {
                        &:after {
                            right: -4px;
                        }
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        width: 18px;
                        height: 15px;
                        background-image: url('../../../assets/svg/arrow-right-green-alt.svg');
                        background-size: cover;
                        background-repeat: no-repeat;
                        top: 50%;
                        right: 0;
                        transform: translateY(-50%);
                        transition: .2s ease-in-out;
                    }
                }
            }
        }
    }
}