@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@700&family=PT+Sans:wght@400;700&family=PT+Sans+Narrow:wght@400;700&family=Roboto:wght@400;700');

body{padding: 0; margin: 0; font-family: 'PT Sans', sans-serif; font-size: 18px; color: #000; background: #fafafa;}
a{text-decoration: none; color: inherit;}
h1{font-size: 42px; padding: 0; margin: 30px 0;}

.container-head{display: flex; justify-content: center; position: sticky; top: 0; width: 100%; z-index: 1000; background: #fafafa; box-shadow: 0px 5px 5px -5px #ccc; margin: 0 0 30px;}
.container-main{display: flex; justify-content: center; flex-direction: column; align-items: center;}
.container-body{display: flex; justify-content: center;}
.container-footer{display: flex; justify-content: center;}

.head{display: flex; justify-items: center; align-items: center; width: 1200px; margin: 30px 0;}

.head .logo{font-family: 'PT Sans Narrow', sans-serif; font-size: 30px; margin: 0 50px 5px 0;}

.head .menu{display: flex; align-items: center;}

.head .search_form{width: 100%;}
.head .search_form form{display: flex; align-items: center; width: 100%;}
.head .search_form form .input{margin: 0 20px 0 0; width: 100%;}
.head .search_form form .input input{font-family: inherit; font-size: 16px; width: calc(100% - 20px); border: 1px solid #999; padding: 9px; border-radius: 6px; outline: none;}
.head .search_form form .button input{margin: 6px 0 0;}

.full-main{display: flex; width: 100%; height: 90vh;}
.full-main .search{width: 100%; background-position: center; background-size: cover;}
.full-main .search .inner{display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%;}
.full-main .search .inner .zn{position: absolute; top: 30px; font-family: 'IBM Plex Serif', serif; font-size: 36px; font-weight: 700;}
.full-main .search .inner .name{font-family: 'PT Sans Narrow', sans-serif; font-size: 30px; margin: 0 0 5vh;}
.full-main .search .inner .form{margin: 0 0 10vh;}
.full-main .search .inner form{display: flex; align-items: center;}
.full-main .search .inner .form .input{margin: 0 10px 0 35px;}
.full-main .search .inner .form .input input{font-family: inherit; font-size: 16px; width: 30vw; border: 0; padding: 9px; border-radius: 6px; outline: none;
    box-shadow: 0px 0px 6px 0px #999;
}
.full-main .search .inner .form .button input{margin: 6px 0 0;}

.main{width: 1200px; padding: 100px 0 50px;}

.body{width: 1200px; margin: 0 0 50px;}

.body .breadcrumbs{font-family: 'Roboto', sans-serif; font-size: 14px; color: #666;}

.body .list{}
.body .list .letter{font-size: 30px;}
.body .list .block{margin: 0 0 30px;}
.body .list .items .item{margin: 5px 0;}

.text{}
.text figure{margin: 0; width: fit-content;}
.text .image{width: 800px; height: fit-content; border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 3/2;}
.text .image img{width: 100%; height: 100%; display: block; position: absolute; object-fit: cover;}

.categories{display: flex; flex-wrap: wrap; margin: 0 0 50px;}
.categories .item{width: calc(100% / 3 - 50px); margin: 0 50px 50px 0;}
.categories .item a{transition: opacity 0.3s;}
.categories .item a:hover{opacity: 0.9;}
.categories .item .data{display: flex;}
.categories .item .title{font-size: 20px;}
.categories .item .image{min-width: 160px; aspect-ratio: 4/3; background: #b3b2ae; margin: 0 20px 0 0; border-radius: 12px 0 0 12px;}

.links{margin: 0 0 50px;}
.links .list{display: flex;}
.links .list .item{margin: 0 20px 0 0;}

.footer{margin: 0 0 50px;}

@media screen and (max-width: 1260px) {
    .head{width: calc(100% - 40px); padding: 0 20px;}
    .body{width: calc(100% - 40px); padding: 0 20px;}
    .main{width: calc(100% - 40px); padding: 70px 20px 50px;}
    .full-main .search .inner .form .input input{width: 50vw;}
    .categories{margin: 0 0 20px;}
    .text .image{width: 640px;}
}

@media screen and (max-width: 1000px) {
    .categories .item{width: calc(100% / 2 - 50px);}
    .text .image{width: 600px;}
}

@media screen and (max-width: 640px) {
    h1 {font-size: 35px;}
    .head{margin: 15px 0;}
    .head .logo{margin: 0 20px 5px 0;}
    .head .search_form form .input{margin: 0 10px 0 0;}
    .categories .item{width: 100%; margin: 0 0 50px;}
    .links .list{flex-direction: column;}
    .links .list .item{margin: 5px 0;}
    .text figure{width: 100%;}
    .text .image{width: 100%;}
}