
.article-block{
    padding: clamp(16px, 1.25vw, 32px);
    border: 1px solid $lightest-gray;
    .article-image{
        border-radius: clamp(6px, 0.625vw, 20px);
        position: relative;
        overflow: hidden;

        &.shine {
            &::before {
                background: linear-gradient(to right,
                    fade_out(#fff, 1) 0%,
                    fade_out(#fff, 0.7) 100%);
                content: "";
                display: block;
                height: 100%;
                left: -75%;
                position: absolute;
                top: 0;
                transform: skewX(-25deg);
                width: 50%;
                z-index: 2;
                pointer-events: none;
            }


            @keyframes shine {
                100% {
                    left: 125%;
                }
            }
        }

        img {
            border-radius: clamp(6px, 0.625vw, 20px);
            width: 100%;
            height: 100%;
            object-fit: cover;
            -webkit-transition: all 0.35s linear 0s;
            transition: all 0.35s linear 0s;
        }
    }
    .article-content{
        h6{
            transition: $transition;
        }
        img{
            width: clamp(16px, 1.042vw, 24px);
        }
    }
    &:hover {
        h6 {
            color: $accent-1;
            transition: $transition;
        }

        .article-image {
            img{
                -webkit-transform: scale(1.1);
                transform: scale(1.1);
                -webkit-transition: all 0.35s linear 0s;
                transition: all 0.35s linear 0s;
            }
            &.shine {
                &:hover,
                &:focus {
                    &::before {
                        animation: shine 0.85s;
                    }
                }
            }
        }
    }
}