Antonio09

google > css aspect ratio
https://css-tricks.com/aspect-ratio-boxes/

Попробуйте так

прозрачность?

Да.

Вот вам ссылка на такой же вопрос в СО (решение там есть)

З.ы. учитесь гуглить!

анимируется

UPD. Animatable CSS properties.

document.onmouseout = function(e) {
  if (tooltipElem) {
    tooltipElem.remove();
    tooltipElem = null;
  }
};

Чтобы при следующем событии mouseout условие if (tooltipElem) не проходило и не выполнялся лишний раз tooltipElem.remove()

Это оптимизация.
Визуально разницы нет, но под капотом работает чуть быстрее.

Когда событий сотни и тысячи (в небольшой промежуток времени), то оптимизация даёт более ощутимую разницу. В любом случае, лучше сразу писать правильно, чтобы потом не переписывать.

инвертируется наличие атрибута hidden

event.target.tagName != 'button'

Ясно:

В XML (и XML-подобных языках) возвращаемое значение будет в нижнем регистре, а в HTML - в верхнем.

Есть и менее явный косяк в этой проверке - все ли существующие на странице кнопки должны что-то там удалять? Даже если сейчас это так, будет ли так всегда? Лучше проверять наличие класса:

event.target.classList.contains('remove-button')

// или

event.target.matches('.remove-button')

lastChild включает в себя текстовые элементы, поэтому вместо ожидаемого div он берёт текстовый элемент.
Вам нужно использовать lastElementChild, то есть:

var panes = document.querySelectorAll('.pane');

for (let pane of panes) {
  pane.lastElementChild.onclick = () => pane.remove();
}

https://jsfiddle.net/bry1secd/

for (let pane of panes) {
  pane.getElementsByClassName('remove-button')[0].onclick = () => pane.remove();
}

.main-header__icon--like:hover:after{
  background-color: blue;
}

Кнопка.

Семантика дизайна очень проста:
- кнопки выражают действие
- ссылки ведут на страницы

Соответственно, "добавить в избранное" - это действие.
Как и "зарегистрироваться", "найти" и т.д.

UPD: Не увидел сначала условие про диагонали:

Если вы зададите рамку самому инпуту, то узнаете.
Задайте overflow:hidden .main-header__search или скругления для инпута.

https://jsfiddle.net/kickerock/t2p60hk4/2/

так?

Плавного перехода не будет.
Потому что у вас для ".news__image:after" прописано свойство "transition: 0.3s opacity, 0.3s visibility, 0.3s background-color;".
Для visibility не работает transition. Т.е. даже с transition элемент не станет анимирован, всегда будет резко появляться \ исчезать. Здесь список свойств для которых работает анимация.
Убирайте свойство visibility, делайте исчезновение \ появление элемента через opacity и тогда все будет ок.