Css

                                /* Стили ко второму элементу */
.number:nth-child(2) {
    background: url('/img/img.jpg') center no-repeat;
    background-size: cover;
}
    
/* Медиа запрос */
@media (max-width: 576px) {}
@media (min-width: var(--breakpoint-sm)) {}
@media (min-width: map-get($grid-breakpoints, sm)) {}

/* Выравнивание к правому краю */
.align-right {
    margin-left: auto;
}

.var {
	color: var(--primary); // Использование переменных в Bootstrap
}

.align {
    /* Горизонтальное выравнивание с помощью позиционирования */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    /* transform: translateY(-50%) translateX(-50%); или так transform: translate(-50%, -50%); */

    /* Или */
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;

    /* Горизонтальное вертикальное выравнивание с помощью флексбокса */
    display: flex;
    justify-content: center;
    align-items: center;

    background: url('https://lorempixel.com/1600/1000/nature/3') center no-repeat;


    /* Правильный перенос слов */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

/* Для тега img стили как background-size: cover; */
.img {
    object-fit: cover;
}


/* Флип для картинки, т.е. перевернуть как фотошопе */
.flip {
    transform: scaleX(-1);
}


/* Grid flex */
.row-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, auto)); /* Минимального ширина 210px, максимальная ширина auto */
    grid-column-gap: 30px; /* Отступ между колонками */
}


/* Класс скрытие заголовка */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0,0,0,0);
    overflow: hidden;
}

p.clip {
    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    text-overflow: ellipsis; /* Добавляем многоточие */
}

/* Плавность */
.transition {
    transition-property: opacity;
    transition-property: color, background-color; // Несколько свойств
    transition-duration: 500ms;
	transition: all 0.5s; // Или такой вариант
}

/* При клике элемент будет пропущен */
.click-z-index {
    pointer-events: none;
}

/* Прокрутка по горизонтали */
.scrolling-y {
    overflow-y: auto;
}

/* Градиент с тенью к тексту */
.gradient_shadow_text {
	font-weight: bold;
	font-size: 4rem;
	line-height: 1.1;

	/* Градиент */
	background: linear-gradient(135deg, #ffd25e 0%, #dc6662 100%);

	/* Тень */
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));

	/* К тексту */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Подсказка с треугольником */
.triangle {
    position: relative;
    /*width: 80px;
    height: 50px;
    background-color: #ccc;*/
  }
.triangle::before {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    border: 10px solid transparent;
    border-top: 10px solid #ccc;
    transform: translateX(-50%);
}

/* Адаптивная диагональная линия */
.diagonal-line {
    background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="100%" x2="100%" y2="0" stroke="rgb(255,255,255)" stroke-width="1"/></svg>');
}

/* Sticky Footer (прилипающий футер)
<body>
	<div class="content-block"></div>
	<footer class="footer-block"></footer>
</body>
*/
html, body {
    height: 100%;
}
.body-block {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.content-block {
    /* Основной раздел будет занимать все свободное место на странице */
    flex: 1 0 auto;
}
.footer-block {
    /* Футер будет занимать столько места по вертикали, сколько и должен */
    flex: 0 0 auto;
}
    
/*

> обращение к дочернему элементу, т.е. в одном div другой и общаюсь к доченему.
, пишу классы через запятую и с новой строчки, когда применть к одному и другому.
h3 + p применяется к первому следующему за h3 p и они находятся на одном уровне.
h3 ~ p применяется ко всем следеющим за h3 p и они находятся на одном уровне
.class1.class2 такая запись означает что если два класса стоят рядом class="class1 class2" будет действовать свойство.

*/
h1 {
	font-weight: 300; /* Выбор ширины шрифта (lighter) */
	text-transform: uppercase; /* Заглавные буквы */
	line-height: 1.5; /* Межстрочное расстояние line-height: 20px; */
	opacity: 0.6; /* Прозрачность */
	letter-spacing: 10px; /* Расстояние между символами */
	text-indent: 1.5em; /* Красная строка */
	vertical-align: middle; /* вертикальное выравнивание по центру, можно top */
	font: bold 24px/10pt Arial, sans-serif; /* коротко, /10pt - это интерлиньяж */
	text-shadow: 2px 2px 5px #ccc; /* тень сдвиг горизонталь, вертикаль и размытие */
	text-shadow: 0px 2px 0 #ccc, 0px -2px 0 #ff0000; /* множественная тень */
	word-wrap: break-word; /* делает перенос текста, если длинное слово не вмещается */
	overflow: hidden; /* спрятать всё, что выходит за границы блока */
}

/* Подключить шрифт */
@font-face {
	font-family: 'Roboto', sans-serif;
	src: url('../font/Roboto.eot');
	src: url('../font/Roboto.eot?#iefix') format('embedded-opentype'),
		 url('../font/Roboto.ttf') format('truetype'),
		 url('../font/Roboto.woff') format('woff'),
		 url('../font/Roboto.svg#Roboto') format('svg');
}


* { /* Все элементы на странице */
box-sizing: border-box; /* Приравнивает к единой ширине и высоте */
}

img {
	border: none; /* Убираем рамку для IE8  */
	max-width: 100%; /* Резиновая картинка */
	height: auto; /* Резиновая картинка */
	display: block; /* Делаем по центру */
	margin: 0 auto; /* Делаем по центру */

	object-fit: cover; /* Заполнение блока картинкой */

	/* Гидкий показ тега img */
	display: block;
    margin: 0 auto;
    max-height: 12.24rem;
    width: auto;
    max-width: 96%;
}

.margin,
.padding {
	margin: 5px 10px 5px 15px; /* вверх, справа, снизу, слева */
	padding: 15px 10px 15px; /* вверх, справа и слева, снизу */
}

a {
	text-decoration: underline; /* Делаем подчеркивание  <ins></ins> */
	color: inherit; /* свойства шрифта унаследуются, к примеру цвет текста */
}
a:visited {
	color: #800080; /* Цвет посещенной ссылки */
} 
a:hover { /* hover - при наведение, active - активная */
	text-decoration: none; /* Убираем подчеркивание */
}
a:hover:visited{} /* можно применять к нескольким состояниям */
/*

Чтобы отменить float применяют clear: both; бывает left и right
overflow: hidden; убирает наезжание элементов
Задаю у родителького элемента при float!
overflow: auto; скрывает текст и появляются скролы

*/
h1 { /* Позиционирование */
	position: relative; /* относительно блока родителя */
	/* position: absolute; относительно всего сайта (если стоит у родителя, то тогда от родителя) */
	/* position: fixed; фиксирует относительно всего сайта */
	/* position: static; у всех по-умолчанию */
	left: 10px;
	top: 10px;
}
ul { /* Списки */
	list-style-type: none; /* list-style-type: circle; круглые */
	list-style-image: url(images/book.png); /* Путь к изображению маркера */
}
ul li {
	display: inline-block; /* Для горизонтального списка */
}

li:first-child {
	color: #f5f5f5; /* Применяются свойства к первому элементу списка, last-child к последнему (last-child к последнему) */
}
ul li:after { /* Псевдокласс после вставить картинку */
	content: url("../img/menu.jpeg"); /* это после присоединить картинку, можно добавить текст или unicode иконку */
} 
/*

:before до
:after после
:first-letter {} к первой букве применияется
:first-line {} к первой строке применяется
:only-child к дочернему элементу

*/
.icon:before { /* Псевдо элемент иконка FontAwesome */
  font-family: 'FontAwesome';
  content: "\f067"; /* plus (f067, \f0fe, \f196), \f068 minus (\f146, \f147), close \f00d, chevron-circle-right (\f138) left (\f138)*/
}

.icon:nth-child(2) { /* Ко второму */
    background: #fff;
}
/*

:nth-child(1) к первому или любому по счёту.
К чётным ячейкам(even) таблицы, можно odd тогда нечётные,
или 3 применится к третьей ячейки,
или 4n примениться к каждому четвёртому
tr:nth-last-child(even) тоже самое только с конца
p:nth-of-type(2n) для текстовых блоков в div
tr:not(:nth-child(even)) отрицательный псевдокласс, сделает всё наоборот */
.tbl td:empty { /* пустая ячейка */
	background: #ccc;
}
input:disabled { /* отключить input */
	color: #ff0000;
}
input:checked + span { /* при выборе чекбокса окрашивается текст */
	color: #ff0000;
}
input[type=text]::placeholder { /* Стили для placeholder */
    font-size: 12px;
}

.gallery {
	background: #fff url(“../img/menu.jpeg”) repeat-x center center fixed;
	/* Коротко. Чтобы добавить две картинки пишу их через запятую */
	background-color: #fff;
	background-image: url(“../img/menu.jpeg”);
	background-position: top center; /* top, botton, left, right, center, 300px 30px - 300-по горизонтали, 30 по-вертикали) */
	background-repeat: repeat-x; /* repeat-y, no-repeat */
	background-attachment: fixed; /* фиксирует картинку при скролинге */
	background-size: cover; /* заполняет полностью секцию (contain - показывает картинку польностью, 100% 90px - ширина 100% высота всегда 90рх) */
}

/* Прозрачность у border */
.border-transporent-opacity {
	background-color: #333;
	border: 1px solid rgba(0, 0, 0, 0.5);
	background-clip: padding-box;
}
/*

height: 100vh; Занимает всю высоту экрана
width: 100 vw; Занимает всю ширину экрана
font-size: 5vw; Резиновый шрифт

*/

.gallery { /* Тень */
	box-shadow: 0 0 57px 0 rgba(20, 20, 21, 0.2);
}

/* убрать при фокусе первоначальный текст input */
.placeholder:focus::-moz-placeholder,
.placeholder:focus::-webkit-input-placeholder,
.textarea:focus::-moz-placeholder,
.textarea:focus::-webkit-input-placeholder {
	color: transparent !important;
}

input, button, textarea:invalid { /* Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты. */
	box-shadow: none;
}

/* Для экранов от 576рх */
@media (max-width: 576px) {}

/* Для экранов от 768рх до 560рх */
@media (max-width: 768px) and (min-width: 560px) {}
/* Кроме экранов от 768рх до 560рх */
@media not all and (max-width: 768px) and (min-width: 560px) {}

/* Для экранов до 768рх, а на меньших не будет */
@media (min-width: 768px) {}

/* Bootstrap */
@media (max-width: 576px) {}
@media (max-width: 768px) {}
@media (max-width: 992px) {}
@media (max-width: 1200px) {}

/* Для принтеров */
@media print {}
/* Для принтеров или для экранов от 768px */
@media print, (max-width: 768px) {}

/* Для портретной ориентации, т.е. высота больше ширины */
@media (orientation: portrait) {}
/* Для горизонтальной ориентации, т.е. ширина больше высоты */
@media (orientation: landscape) {}

/* Для двойной плотности пикселей на экране */
@media (min-resolution: 2dppx) {}

div {
	/* Линейный градиент */
	background-image: linear-gradient(#ccc, #000);
	/*
	Можно писать угол наклона background-image: linear-gradient(90deg, #ccc, #000);
	Можно задавать много цветов background-image: linear-gradient(#000, #ccc, #000);
	Можно менять точку начала градиента background-image: linear-gradient(#000, #ccc 30%, #000); или можно 30px
	Можно повторять много градиентов background-image: repeating-linear-gradient(#000 20px, #ccc 20px, #000 20px);*/
	/* Радиальный градиент */
	background-image: radial-gradient(#ccc, #000);
	/*
	Задаю расположение (по центру) background-image: radial-gradient(50% 50%, #ccc, #000);
	Можно задать форму (круг или ellips) background-image: radial-gradient(50% 50%, circle, #ccc, #000);
	Можно указывать много цветов и указать диапозон background-image: radial-gradient(50% 50%, circle, #ccc 30px, #000 40px);
	Можно сделать градиент  в контейнере написать circle contain
	Градиент до ближайшей стенки circle contain
	Градиент до края circle closeset-corner
	Тоже что выше только пошире circle cover*/
	/* Колонки */
	column-count: 3;
	column-gap: 30px;/* отступ между колонками */
	column-rule: 1px solid #ccc; /*  рамка между колонками */

	/* Трансформации */
	transition: opacity 0.8s ease-in-out; /* Плавное исчезновение */
	transition: all 0.3s linear; /* Обычная трансформация */
	transition: all 0.6s ease; /* Увеличение */

	transform: rotate(-10deg); /* смещение влево на 10 градусов */
	transform: translate(-10px, 20px); /* сдвигает -10 по оси х, 20 по оси у */
	transform-origin: 10% 20%; /* сдвигает центральную точку сдвига у */
	transform: skew(-10deg, 20deg); /* по горизонтали и по вертикали искажает */
	transform: scale(2, 1); /* маштаб 2:1, если одна цифра, то с двух сторон одинково трансформирует. К примеру 1, -1 будет зеркальное отображение */
	/* Можно все свойства записать в одну строку */
	transform: rotate(-45deg) scale(0.75) translate(75%, -100%);
	transform: matrix(1, 2, 3, 4, 5, 6); /* 1.маштаб по гориз, 2.сдвиги по гориз, 3.маштаб по вертик,
	4.сдвиг по вертик, 5.смещение по х, 6.смещение по у */ 
}

/* Закрыть весь экран сайта */
.preloader {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	background-color: #fefefe;
	opacity: 0.5;
	display: none;
}
.preloader img { /* img 200px */
	position: relative;
	top: 50vh;
	left: 50%;
	margin: -100px 0 0 -100px;
}
/*

BAM
Основной класс wrapper
Вложенный будет wrapper__table
Модификатор будет wrapper__table--tr

*/

/* Анимация вниз и обратно верх */
.animate-bottom {
	animation-name: animateBottom;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
@keyframes animateBottom {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(25px);
	}
	100% {
		transform: translateY(0);
	}
}

/* Делает плавный скрол к якорю */
html {
	scroll-behavior: smooth;
}


/* Треугольник вверх */
#triangle-up {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
}
/* Треугольник в левом верхнем углу */
#triangle-topleft {
	width: 0;
	height: 0;
	border-top: 100px solid red; 
	border-right: 100px solid transparent;			
}


/* Обтекание справо */
.parent {
    clear: both;
}
.parent .left {}
.parent .right {
    margin: 20px;
    float: right;
}


/* Grid flex */
.row-grid {
	display: grid;
	grid-template-columns: 150px 1fr 150px; /* Первая колонка 150px, вторая занимает оставшееся место, третья колонка 150px */

	/*
	Допустимо em, rem, vm, vh, %
	1fr - занимает оставшееся место и приэтом видна сетка
	min-content - минимальная ширина слова
	max-content - максимальная ширина строки
	auto - автоматически
	minmax(150px, auto) - минимальная ширина 150px, максимальная автоматически
	auto-fill - любое кол-во элементов, при этом элементы не растягиваются по ширине
	auto-fit - любое кол-во элементов, при этом элементы растягиваются по ширине
	repeat(auto-fit, minmax(150px, auto)) - повторяет значения для grid-template
	. - символ точки, означает что будет пустое место
	*/

	grid-template-rows: minmax(150px, 1fr) 150px; /* Ряды, не стоит указывать высоту */

	grid-template-columns: repeat(auto-fit, minmax(150px, auto)); /* Минимального ширина 150px, максимальная ширина auto */
	grid-template-columns: repeat(12, minmax(100px, auto)); /* 12 колоночная сетка, ширина 1200px */


	/* Элементы будут заполнять колонку вне зависимости от очерёдности, т.е. если последний элемент не вмещается в ширину, то он будет ниже - это стандартно, а тот элемент, который поместится будет перемещён на его место, т.е. очерёдность будет другой - это удобно для динамического контента (row dense - так же для рядов) */
	grid-auto-flow: column dense;


	grid-gap: 30px; /* Отступ между рядами и колонками */
	grid-row-gap: 30px; /* Отступ между рядами */
	grid-column-gap: 30px; /* Отступ между колонками */


	/* Элементы внутри сетки выровнятся по центру */
	justify-items: center;
	align-items: center;
}

/* Grid flex перемещение элемента */
.row-grid {
	display: grid;
	grid-template-rows: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto);
	grid-template-columns: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto);
}

/* Разместить элемент на втором ряду и третьей колонки */
.row-grid-element {
	/* Допустимы отрицательные значения, тогда отчёт с конца */

	/* Элемент начинается */
	grid-row-start: 2;
	grid-column-start: 3;

	/* Элемент закончится, т.е. как бы растянется */
	grid-row-end: 3;
	grid-column-end: 4;


	/* Всё, что выше можно написать так: */
	grid-row: 2 / 3; /* 1 / 1 - значения колонки на всю шинину */
	grid-column: 3 / 4;

	/*
	grid-row: span 3; Означает блок растянется на 3 ряда вниз */
}

/* Элемент внутри сетки выровнится по центру */
.element {
	justify-self: center;
	align-self: center;
}


/* Flex */
.flex-container {
	display: flex; /* На всю ширину блока */
	display: inline-flex; /* Будет занимать ширину элементов */
	flex-direction: row; /* По-умолчанию горизонтальная ось */
	/*
	flex-grow: 1; Чтобы элемент занял всю доступную ширину
	flex-direction: row-reverse; Горизонтальная ось справо налево
	flex-direction: column; Вертикальная ось - поперечная
	flex-direction: column-reverse; Вертикальная ось снизу вверх
	*/
	flex-wrap: wrap; /* Элементы будут переносится на новую строку, если nowrap, то по-умолчанию не переносятся (по-умолчанию nowrap - не переносятся) */

	justify-content: flex-start; /* По-умолчанию все элементы к началу оси по горизонтали */
	/*
	justify-content: flex-end; К концу оси
	justify-content: center; В центре оси
	justify-content: space-between; Первый элемент к началу оси, последний - к концу оси
	justify-content: space-around; Расположение с одинаковыми оступами
	*/

	align-items: stretch; /* По-умолчанию все элементы растягиваются на всю высоту */
	/*
	align-items: flex-start; К началу оси
	align-items: flex-end; К концу оси
	align-items: center; В центр оси
	align-items: baseline; К началу оси и насположени блоков на одной линии, т.е. если разный размер шрифта, то элементы будут растологаться по центру базовой линии.
	*/
	align-content: stretch; /* По-умолчанию все элементы растягиваются на всю высоту, является более главным чем align-items */
	/*
	align-content: space-between; Первый элемент к началу оси, последний - к концу оси, будет работать если установлено flex-wrap: wrap;
	align-content: space-around; Расположение с одинаковыми оступами, будет работать если установлено flex-wrap: wrap;
	*/
}

.flex-element {
	flex-basis: 0; /* По-умолчанию все элементы растягиваются на всю ширину */
    flex-grow: 1;
}

.flex-element-one {
	flex-basis: 20rem; /* Ширина или высота элемента, взависимости от оси */
}
.flex-element-two {
	flex-grow: 1; /* Элемент займёт всю доступную ширину в контейнере. Если у второго элемента задать flex-grow: 2, то он будет в 2 раза шире первого */
}

.flex-element-three {
	align-self: stretch; /* Значение по-умолчанию, описаны выше, бывает: flex-start, flex-end, center, baseline */
    justify-self: center;
	order: 0; /* Порядок расположения элементов 1 выше 0 */

	flex-shrink: 1; /* Чтобы элемент не ужимался */
}

.flex-element:first-child {
	margin-right: auto; /* Прижать элемент к левому краю */
}

.flex-element:last-child {
	margin-left: auto; /* Прижать элемент к правому краю */
}
.flex-element:last-child {
	flex: none; /* Выбить элемент из flex контейнера, элемент не будет флекситься */
}
Список