* { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; padding: 0; background: #F9F9F9; font-family: 'MuseoSansCyrl', sans-serif; } a{ text-decoration: none; } .container{ max-width: 1256px; padding: 0 24px; margin: 0 auto; } /* Banner strat */ .banner { padding: 50px 24px; } .banner_block { position: relative; max-width: 592px; padding: 0px 20px 0 11px; border-radius: 8px; background-image: url(../img/banner-bg.png); background-repeat: no-repeat; background-size: cover; margin: 0 auto; display: flex; align-items: center; gap: 10px; } .banner .info_block { display: flex; align-items: end; padding: 16px 0px 18px; } .banner_block_number { display: block; height: 100%; } .banner_block_number2 { display: none; position: absolute; top: 24px; right: 16px; } .banner_block_info { display: flex; flex-direction: column; gap: 12px; } .banner_block_title { font-size: 20px; font-weight: 600; line-height: 20px; color: #FFF; max-width: 278px; } .banner_block_text { font-size: 14px; font-weight: 400; line-height: 16.8px; color: #FFF; max-width: 233px; } .banner_block_btn { font-size: 14px; font-weight: 600; line-height: 16.8px; color: #0F1521; background: #FFFFFF; border-radius: 4px; text-decoration: none; padding: 10px; width: 160px; height: 42px; display: flex; align-items: center; justify-content: center; white-space: nowrap; } .breadcrumb{ padding: 15px 0px 40px; display: flex; align-items: center; gap: 5px; } .breadcrumb_text, .breadcrumb_link{ font-size: 14px; font-weight: 300; line-height: 16.8px; color: #878A90; } .breadcrumb_text{ color: #000000; } /* Authors start */ .authors{ padding: 0px 0px 100px; } .authors_block{ display: flex; flex-direction: column; gap: 60px; } .authors_block_title{ font-size: 32px; font-weight: 600; line-height: 38.4px; color: #0F1521; } .authors_cards{ display: grid; grid-template-columns: 32% 32% 32%; gap: 20px; } .authors_card{ display: flex; flex-direction: column; gap: 20px; } .authors_card_img{ width: 100%; height: 500px; border-radius: 8px; object-fit: cover; } .authors_card_title{ font-size: 32px; font-weight: 600; line-height: 32px; color: #000000; } .authors_card_text{ font-size: 16px; font-weight: 400; line-height: 16px; color: #000000; } .authors_block .authors_top{ display: flex; background: #FFF; border-radius: 8px; } .authors_top_img{ border-radius: 8px; object-fit: cover; } .authors_top_info{ padding: 40px 40px 58px; display: flex; flex-direction: column; gap: 32px; } .authors_top .info_title{ display: flex; flex-direction: column; gap: 12px; } .authors_top_info h3{ font-size: 24px; font-weight: 600; line-height: 28.8px; color: #000000; } .authors_top p{ font-size: 16px; font-weight: 400; line-height: 19.2px; color: #000000; } .authors_items{ display: grid; grid-template-columns: 32.2% 32.2% 32.2%; gap: 20px; } .authors_item{ background: #FFFFFF; border-radius: 8px; } .authors_item_img{ border-radius: 8px; object-fit: cover; width: 100%; height: 200px; } .authors_item_info{ display: flex; flex-direction: column; gap: 25px; padding: 25px 20px; } .authors_item_boxs{ display: flex; align-items: center; justify-content: space-between; gap: 20px; } .authors_item_box{ display: flex; align-items: center; gap: 12px; } .authors_item_info span{ font-size: 14px; font-weight: 300; line-height: 16.8px; color: #777777; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .authors_item_title{ font-size: 16px; font-weight: 600; line-height: 19.2px; color: #0F1521; } .items_block{ display: flex; flex-direction: column; align-items: center; gap: 40px; } .item_pagination{ display: flex; align-items: center; gap: 24px; } .item_pagination_tab{ background: #F3F3F3; width: 70px; height: 71px; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: none; outline: none; font-size: 16px; font-weight: 600; line-height: 19.2px; color: #878A90; cursor: pointer; transition: .3s ease all; } .item_pagination_tab:hover, .item_pagination_tab.active{ background: linear-gradient(264.09deg, #88B23F 4.91%, #247238 91.1%); color: #FFF; font-weight: 600; } /* @Media start */ @media (max-width: 1024px) { .authors_items { grid-template-columns: 49% 49%; } } @media (max-width: 768px) { .banner .banner_block { padding: 30px 20px; display: block; } .banner .info_block { padding: 0; align-items: start; flex-direction: column; gap: 18px; } .banner_block_number { display: none; } .banner_block_number2 { display: block; } .banner_block_info { padding-right: 103px; gap: 16px; } .banner_block_text, .banner_block_title { max-width: 100%; } .authors_cards { grid-template-columns: 48.5% 48.5%; gap: 40px 20px; } .authors_item .info { gap: 15px; } .authors_item_info { gap: 20px; padding: 20px 15px; } .authors_items { grid-template-columns: 100%; } } @media (max-width: 568px) { .banner .banner_block { border-radius: 4px; } .banner_block_btn { width: 100%; border-radius: 4px; } .banner_block_text, .banner_block_title { max-width: 250px; } .authors_cards { grid-template-columns: 100%; } .authors_card { gap: 15px; } .authors_card_img { height: 400px; } .authors_card_title { font-size: 26px; line-height: 26px; } .authors_block .authors_top{ flex-direction: column; } .authors_top_img{ height: 350px; } .authors_top_info { padding: 30px 30px 38px; gap: 30px; } .item_pagination { gap: 15px; } .item_pagination_tab { width: 50px; height: 51px; border-radius: 4px; } }