Как исправить первый элемент?

Question

[Skrolea]

Делаю список новостей. Все новости представляют из себя карты, кроме первой - Codepen
Для первой карты я меняю направление с column на row, с помощью псевдокласcа :first-child,

.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);
}

но мне так же надо поменять изображение с

width: 100%;
    height: auto;

на наоборот

width: auto;
    height: 100%;

Мне нужна ширина фотографии на ширину двух нижних карт - как это сделать?
Codepen

Answer 1

[Ankhena]

Если ширина известна в точках или %% - сложить 2 ширины и ширину отступа и указать для верхней картинки.
Если ширина неизвестна: блоки независимы, поэтому считать через JS.

Comments

[Skrolea]

Да там у меня сложность поменять внутренний класс с img только первому элементу. Чего то я запутался там

[Ankhena]

Skrolea:
article-card:first-child article-card__img img {}
article-card:first-child img {}

[Skrolea]

А не выйдет так. Он во всех блоках поменяется

[Ankhena]

Skrolea:
с чего бы это во всех?
codepen.io/anon/pen/aBpxKZ

[Ankhena]

Skrolea: красная рамка только у первого

[Skrolea]

Да. Я открыл пейнт и нарисовал, что я хочу. Я открыл кодепен и "перенес" туда свой код. Я написал вопрос на тостере и ждал ответа. А по факту я ошибся в трех символах. Спасибо, конечно, работает)))

[Ankhena]

Skrolea: :) Это со всеми приключается.
Удачи.