How to fix the first element?

Question

css

I'm making a news list. All news are maps except the first one - Codepen
For the first map, I change direction from column to row using the : pseudo first-child- class

.article-card {    
  display: flex; 
  flex-direction: column;
  margin: 0.5rem 0.6rem;
  width: 280px;  
  background-color: #ffffff;
  border-radius: 0.2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
/* Вот тут хочется всё менять */
.article-card:first-child {    
  display: flex; 
  flex-direction: row;
  margin: 0.5rem 0.5rem;
  width: 100%;  
  background-color: #ffffff;
  border-radius: 0.2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

but I also need to change the image from

width: 100%;
    height: auto;

on the contrary

width: auto;
    height: 100%;

I need the width of the photo to be the width of the two bottom cards - how do I do that?
code pen

Answer 1

If the width is known in points or %% - add 2 widths and the padding width and specify for the top image.
If the width is unknown: the blocks are independent, so count via JS.