Александр

Какой-то несвязный вопрос. Ну, допустим так:

const urls = [
  '/page/profile',
  '/page/article/123123',
  '/page/article/new',
  '/page/article',
  '/page/some/nested/structure/here',
  '/page/module/article/new'
];

for (const url of urls ) {
  const expression = /^\/page\/(.*)?(article)(.*)?$/g;
  
  console.log(url, expression.test(url));
}
/*
'/page/profile' false
'/page/article/123123' true
'/page/article/new' true
'/page/article' true
'/page/some/nested/structure/here' false
'/page/module/article/new' true
*/

.checkmark__circle {
  stroke: ЦВЕТ;
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px ЦВЕТ;
  }
}

const accordions = document.querySelectorAll('.accordion__card');

for (const accordion of accordions) {
  const title = accordion.querySelector('.accordion__card__title');
  const text = accordion.querySelector('.accordion__card__text');

  title.addEventListener('click', () => {
    if (text.classList.contains('accordion__card__text--active')) {
      text.classList.remove('accordion__card__text--active');
    } else {
      for (const accordion of accordions) {
        const text = accordion.querySelector('.accordion__card__text');

        text.classList.remove('accordion__card__text--active');
      }

      text.classList.add('accordion__card__text--active');
    }
  });
}

Ту часть, на которую пользователь нажимать должен лучше сделать кнопкой. А еще вот это можете почитать.

Если у Вас имеется максимально возможно значение, то Вы можете рассчитать процент по формуле (now / total) * 100:

function calculatePercent(value, max) {
    return (value / max) * 100;
}

UPD:
Вышел Chrome 88 и там ввели свойство aspect-ratio.

Вариант 1 - float: right;.
Вариант 2 - flex.
Вариант 3 - grid.
Вариант 4 - position: absolute/fixed.

Менять perspective-origin.

- 0 {
+ 0% {

Изображение через background-image.

Правильное использование отступов и min-height: 100vh; поможет.
По поводу Вашего проекта - нету:
- main, зато есть section (имеется ввиду, что надо было использовать main);
- meta-тэги, их почти нет;
- outlin'ы - их вообще нет;
- Языки нельзя переключать с клавиатуры (читайте про tabindex).

Косяки:
- cursor: hand; не существует;
- Атрибут required содержит значение required;
- Ссылки, ведущие на сторонние ресурсы не имеют rel="noopener" или rel="noreferrer";
- Половина (2/3) ссылок для мессенджеров открывается в той же вкладке.

Также Lighthouse ругается - CSS и JS не минифицированы (что-то мне подсказывает, что картинки тоже).

Если надо именно скрыть, воспользуйтесь visually-hidden:

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    overflow: hidden;
}