.background {
position: relative;
}
.background:before {
content:"";
display: block;
height: 0; // Опционально
padding-top: calc( 100% * 793 / 1426 ); // Y / X
}.background svg {
display: block;
position : absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%; // опционально
height: 100%; // опционально
}$(document).ready(function() {
$('div br').replaceWith('\n');
var text = $('div').text().trim();
$('pre').text(text);
});$(document).ready(function() {
var text = $('div').html().trim().replace("<br>", "\n").replace("<p>", "").replace("</p>", "");
$('pre').text(text);
});$(document).ready(function() {
var text = $('div').clone().find("br").replaceWith("\n").end().text().trim(); // clone чтоб документ не портить
$('pre').text(text);
});<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.cards {
width: 60%;
border: 2px solid red;
margin: 10px auto;
display: flex;
justify-content: space-between;
padding: 0 45px;
}
.card {
flex-shrink: 0;
position: relative;
width: 0;
height: 126px;
transition: 0.3s;
cursor: pointer;
}
.card:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: -45px;
width: 90px;
height: 100%;
background-color: blue;
border-style: inset;
border-radius: 10px;
}
.card:hover{
transform: translate(0, -20px);
}
</style>
</head>
<body>
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>
</html>$("input").focus(); .project { display:none;}
.project.is-active { display:block;}$(".button .title").on("click", function(){
var ind = $(this).index();
$(".project")
.removeClass("is-active")
.eq(ind).addClass("is-active");
return false;
});__element) так:.block {
&__element {
&:hover &-sub {
color: red;
}
}
}block__element-sub от block__element не наследовать, если вы их считаете за разные элементы, а не вложенные. т.е. максимально читабельно так:.block {
&__element:hover &__element-sub {
color: red;
}
}