Ankhena

Для однородного фона просто рамка + двойная тень

picture, source {
  display: contents;
}

img {
  border: 2px solid red;
  box-shadow: -10px 10px 0 -2px white, -10px 10px 0 0 red;
}

Преимущество в том, что всё задается одному элементу, прямо картинке. Нет ни сдвигов ни зависимостей от других элементов.

Если фон неоднородный, то либо бордеры разным элементам либо псевдику.
Предпочтение псевдику, чтобы сдвигался именно он, а не сам элемент.

Ещё один вариант: небольшая svg и border-image.

p.s. picture и source удобно убирать с помощью display contents, чтобы не тревожится, будут у клиента эти теги или удалит и что там вообще с ними происходит. Просто делаем их "прозрачными".

Потому что кто-то задал макс ширину 100% глобально для div и p

div, p {
    max-width: 100%; 
}

Уберите или переопределите

я понимаю что есть более правильный подход но не могу найти

Как вариант:

1. Вешаем слушатель событий на документ или родителя этих табов
2. Всем табам даем одинаковый класс
3. Проверяем попал ли таргет на таб
4. Всем убираем класс open
5. Тому, который в таргете задаем его

const CLASS_TAB = 'tab';
const CLASS_OPEN = 'open';

const block = document.querySelector('.block'); // родительский блок табов
const tabs = block.querySelectorAll(`.${CLASS_TAB}`);

block.addEventListener('click', ({target}) => {
  const tab = target.closest(`.${CLASS_TAB}`);
  if (tab) {
    tabs.forEach((item) => {
      item.classList.remove(CLASS_OPEN);
    });
    tab.classList.add(CLASS_OPEN);
  }
});

Условие тоже можно перезаписать компактнее, но мне кажется у вас вопрос как раз в логике кода, а не в сокращении символов.

На что-то такое

if (tab) tabs.forEach(t => t.classList.toggle('open', t === tab));

Когда дойдёте до задачи, когда нужно менять класс не самой кнопке-табу, а соответствующему блоку с контентом, то:
- Почитайте про DOM дерево, поиск родителей, соседей и т.д.
- Так же рекомендую использовать data-атрибуты для связи элементов.

Вот так: https://sitist.ru/bug-border-radius.html

Если span после инпута, то это вообще основы CSS
.is-invalid + .input-group-text

Если бы наоборот, то
:has
Либо добавляя класс к инпуту добавлять и спану.

p.s. пересмотрите стили, чтобы обойтись без !important

Почитайте про ascent-override, descent-override и line-gap-override

Кроме как заменить на svg

Но нужно понимать, что это самое адекватное решение.
А ещё это, наверное, всё таки button, а не div. А x не её контент, а украшение. Контентом там должно быть что-то типа "закрыть окно". Хотя бы aria-label.

Старайтесь разделять смысл (разметку), украшения (стили) и поведение (скрипты).
Кодгайд гугла
Критерии верстки для первокурсников

У фигуры довольно странные правый и верхний края. Либо древний макет либо косяк дизайнера.
А полная резина, судя по этому куску макета, тоже не предусматривается.

В идеале экспортируем пятно в том виде, в котором оно нужно нам, а не полное, как сейчас, если нет каких-то важных причин так не делать. Но пока на основе вашего пятна.

Самый простой вариант: задаем фон для body и дорисовываем направо градиент.
https://codepen.io/AnnaSummer/pen/WbQwNrE

Тут использована ваша png. Если пятно берем отдельно, то экспортируем в svg, если слепляем с девушкой то png и image-set. Но может получиться сложнее с размерами.
--container-width - ширина контейнера.
Сдвиги - взяты с потолка, берите или вычисляйте из макета.
Вместо дурацких компенсирующих сдвигов, я бы обрезала эту SVG до нужных размеров. Аналогичный эффект должен дать экспорт с включенной галкой clip content на нужном фрейме.

В адаптиве перестраиваем по макету.

Альтернативный вариант: использование псевдоэлементов в возможном сочетании с абсолютом, трансформом, гридами и единицами от контейнера. Но без ТЗ для широких мониторов, можно только угадывать.

Дорабатывайте под себя
https://codepen.io/AnnaSummer/pen/BaGoKrE
Альтернативы: маски, clip-path, svg

Чтобы не было, например, "обрезаний" при разных разрешениях экрана или "дополнения" пустых мест его дублированием

Геометрия говорит нам, что если пропорции блока и изображения не совпадают, то возможны три варианта:
- поля
- обрезка лишнего
- искажение пропорций

Поскольку, без искажений пропорций из одного изображения так сделать невозможно, то остается один вариант - подгружать разные файлы.

Но кроме пропорций, есть ещё поддержка форматов и плотность пикселей. Так что, сложность тут не одна.

Какие размеры файла желательны (в байтах)?

Минимальные. При этом нужно сохранять достаточное качество.

Этот вопрос не имеет смысла, даже если вы скажете размер вьюпорта/блока, но не покажете картинку. Потому что одна сожмется прекрасно, а другая заметно потеряет в качестве.

Для ретины и разных форматов файлов используйте image-set
Для разных размеров - @media
Для оптимизации размеров - форматы webp, avif

Фикс размеры

Левее - фикс ширина

даже с учетом опечатки в теге div

2) Как применять маску таким образом что бы доминирующий цвет брался не из html,body ?

Не очень понятно чего нужно достичь, но цвет берется из bg. Ни у кого кроме body его нет. Будет другой у items или item возьмется оттуда.

Заменить высоту на минимальную высоту или вовсе убрать.

Да что ж такое.
Я вам в прошлом вопросе написала тактику.

Не меняются ссылки на цвет , который задал.

Нет, не задали.
Задали для nav, для ссылок - нет.

Как решить проблему ?

Задать.

Также рекомендую начать пользоваться инструментами разработчика в браузере. Он отлично показывает что и почему применилось. У синей (или посещенной фиолетовой) будет написано user agent stylesheet, т.е. стили браузера по умолчанию.

Ссылки не наследуют свойство color.
Чтобы изменить цвет ссылки, нужно ей задать это свойство.
Если нужно, чтобы она была такого же цвета, как родитель, то использовать значение inherit

.nav a {
  color: inherit;
}

p.s. Для доступности меню верстают списком внутри тега nav.

background-position

Т.е. обёртку box2 удалять нельзя.

В CSS есть display: contents для таких вещей.
Остальное гридами.

Свойство gap работает не так как надо

На обоих скриншотах одинаковый gap и по виду очень похож на указанные 30px.
А больше он ничего не делает.

Но предположим, что вы хотели спросить не про gap, а про почему не получилось два столбца.
Теперь смотрим в код (было бы идеально, если бы к коду прикладывалась песочница, в которую можно потыкать, а эти простыни убирались в спойлеры).
Вы пишете: хочу флекс, по строкам, если не влезло, то переноси и сделай отступы (этот ваш gap) 30px.
Смотрим на элемент: ширина 555px.
Смотрим на контейнер: ширина 1140 и отступы 2х15.

Считаем:
Свободное место в контейнере: 1140 - 30 = 1110.
Сколько нужно места хотели бы занять два элемента в ряду: 555х2 + 30 = 1140
=> Не влезает.

А раз не влезает, то переносим.

Нормальное решение:
Меняем флекс на грид и задаем две колонки с нужным отступом.

grid-template-columns: 1fr 1fr;
gap: 30px;

Дополнительно можно почитать про minmax в гридах.

Do Not Indent Children Of
https://www.jetbrains.com/help/webstorm/settings-c...

Но вообще, хорошо, что удаляются отступы конкретно у этих тегов. Зачем вам сдвиг практически всего кода из-за вложенности в body?



p.s. за user-scalable=no и maximum-scale=1 отрывала бы руки.