* {
padding: 0;
margin: 0;
}

body {
font: 16px/18px "Rubik", Helvetica Neue, Helvetica, Arial, sans-serif;
color: #000000;
background-color: #fff;
min-height: 100vh;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
padding: 0;
margin: 0;
}

img {
display: block;
width: auto;
max-width: 100%;
}

a {
color: #000000;
text-decoration: underline;
text-decoration-color: #dfdfdf;
text-decoration-thickness: .0625em;
text-underline-offset: 0.25em;
}

a:hover {
color: #0033aa;
text-decoration: none;
}

.layoutContainer {
max-width: 1000px;
margin: 0 auto;
}

.header {
padding: 2rem 3rem;
display: flex;
justify-content: space-between;
}

.header-leftside {
display: flex;
gap: 3rem;
}

.nav {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
justify-content: end;
column-gap: 1.5rem;
}

.nav a {
color: #484848;
font-size: 1.25rem;
text-decoration: none;
}

.nav a:hover {
color: #cf5d61;
}

.ico {
max-width: 22px;
max-height: 22px;
fill: green;
}

.ico:hover {
fill: red;
}


.icon-set {
display: flex;
gap: 1.5rem;
}

.top-bnr {
padding: 0 3rem 3rem;
position: relative;
}

.top-bnr-txt {
position: absolute;
color: #fff;
top: 69px;
left: 111px;
}

.top-bnr-txt .lead {
font-size: 1rem;
line-height: 2.25rem;
}

.top-bnr-txt h1 {
font-size: 120px;
line-height: 100px;
letter-spacing: -7px;
font-style: normal;
font-weight: 300;
padding: 0;
margin: 0;
}

.top-bnr-txt .desc {
font-size: 1.3125rem;
line-height: 1.5625rem;
max-width: 350px;
margin-top: 23px;
}

.text-block {
padding: 0 3rem 4.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.text-block h2 {
font-size: 2.25rem;
line-height: 2.625rem;
font-weight: 500;
}

.text-block p {
max-width: 65%;
font-size: 1rem;
line-height: 1.5rem;
}

.catalog-block {
display: flex;
gap: 1rem;
padding: 0 3rem 3rem;
}


.catalog-block .card {
display: flex;
flex-direction: column;
gap: 0;
}

.catalog-block .card .card-title {
font-size: 1.75rem;
line-height: 2.25rem;
font-weight: 500;
margin-top: 6px;
}

.catalog-block .card .card-desc {
font-size: 1rem;
line-height: 1.125rem;
}

.catalog-block .card .card-price {
font-size: 1rem;
line-height: 1.125rem;
}


.pb-xl {
padding-bottom: 3.75rem;
}

.pb-xxl {
padding-bottom: 4.5rem;
}

.psevdo-nav {
display: flex;
gap: 1.875rem;
}

.footer {
padding: 0 3rem 3.75rem;
display: flex;
justify-content: space-between;
}

.autor {
display: flex;
flex-direction: column;
gap: 0.625rem;
}


.footer .bottom-nav {
display: flex;
gap: 2rem;
}

.footer .bottom-nav-col {
display: flex;
flex-direction: column;
gap: .5rem;
}


@media (width <= 768px) {
.header-leftside {
display: flex;
gap: 1rem;
flex-direction: column;
}	

.top-bnr img {
margin-bottom: 1rem;
}

.top-bnr-txt {
position: relative;
color: #000000;
top: unset;
left: unset;
}

.top-bnr-txt h1 {
font-size: 12vw;
line-height: 10vw;
}

.top-bnr-txt .desc {
font-size: 1rem;
line-height: 1.4rem;
max-width: 80%;
margin-top: 1.5rem;
}

.text-block p {
max-width: 90%;
}

.catalog-block {
flex-direction: column;
gap: 3rem;
}

.catalog-block.vert img {
max-width: 62%;
}
	
}
	
	
@media (width <= 576px) {
:root {
font-size: 14px;
line-height: 16px;
}

.header {
font-size: 1rem;
}

.nav {
column-gap: 1.5em;
}
}