.articleThumb{
    display: flex;
    gap: 15px;
    align-items: end;
    padding: 10px;
    transition: 0.5s background;
    /* flex-wrap: wrap; */
    .thumbImage{
        width: min(100svw, 200px);
        aspect-ratio: 1.5;
        object-fit: cover;
        border-radius: 15px;
        &[src$=".svg"]{
            object-fit: contain;
            border: 1px solid gray;
            padding: 10px;
        }

    }
    .thumbKicker{
        font-size:80%;
        color: gray;
    }
    .thumbTitle{
        font-weight: bold;
        color:var(--color1);
    }
    .thumbIntro{
        font-size: 80%;
    }
    &:hover{
        background-color: var(--lightGray);
        *{
            color:black;
        }
    }
    &.minThumb{
        background-color: white;
        flex-direction: column;
        box-shadow: 2px 2px 6px gray;
        border-radius: 15px;
        align-items: start;
        margin-bottom: 10px;
        .thumbImage{
            align-self: center;
            width: 100%;
        }
        .thumbKicker{
            height: 1.5rem;
            width:100%;
            overflow: hidden;
        }
        .thumbTitle{
            height: 3.5rem;
            width:100%;
            overflow: hidden;
        }

    }
}
@container (width < 600px){
    
    .articleThumb{
        flex-direction: column;
        .thumbImage{
            align-self: center;
            width: min(100svw, 300px)
        }
    }
}