.inject{ display: flex; margin-bottom: 25px; width: 100%; .illustration{ width: 250px; min-width: 250px; display: flex; align-items: center; margin-right: 30px; .picture-cont-16x9{ margin: 0; } } .meta{ border-top: 1px solid #eeeeee; border-bottom: 1px solid #eee; padding: 20px 20px 20px 0; .title{ line-height: 24px; margin: 0; a{ color: #222; font: 700 22px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; } } } @media(max-width: @size-mobile){ flex-wrap: wrap; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eee; .illustration{ width: 100%; min-width: 100%; margin-right: 0; padding-top:20px; } .meta{ border-top: none; border-bottom: none; padding: 20px 0 20px 0; .title{ a{ font-size: 18px; } } } } } .inject1{ display: block; margin-bottom: 5px; width: 320px; min-width: 320px; float:left; clear:both; padding-top: 13px; margin-right: 20px; .illustration{ width: 100%; min-width: 320px; display: flex; padding-top: 10px; border-top: 3px solid #eeeeee; .picture-cont-16x9{ margin: 0; } } .meta{ border-bottom: 1px solid #eee; padding: 14px 14px 15px 0; .title{ line-height: 22px; margin: 0; a{ color: #222; font: 600 20px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; } p{ font-size: 14px; color: #888; font-weight: normal; margin-top:5px; } } } @media(max-width: @size-mobile){ flex-wrap: wrap; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eee; float:none; margin-right: 0px; .illustration{ width: 100%; min-width: 100%; margin-right: 0; padding-top:20px; } .meta{ border-top: none; border-bottom: none; padding: 20px 0 20px 0; .title{ a{ font-size: 18px; } } } } } .inject2{ z-index: 1; text-align: left; display: flex; align-items: flex-end; justify-content: flex-start; align-content: flex-end; flex-wrap: wrap; overflow: hidden; position: relative; margin-bottom:30px; .illustration{ width: 100%; min-width: 600px; display: flex; padding-top: 10px; border-top: 3px solid #eeeeee; .picture-cont-16x9{ margin: 0; filter: brightness(0.6); } } .meta{ position: absolute; bottom: 0; left: 0; color: #fff; padding: 0 30px; border-bottom: 1px solid #eee; .title{ line-height: 30px; margin-bottom: 10px; a{ color: #fff; font: 700 28px/32px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; } } .breadcrumbs{ a{ color: #fffefe8c; font: 400 12px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; } } .lead{ font-size: 16px; line-height: 150%; padding-bottom: 15px; color: hsla(0,0%,100%,.8); } } @media(max-width: @size-mobile){ flex-wrap: wrap; border-top: 1px solid #eeeeee; border-bottom: 1px solid #eee; margin-bottom: 5px; .illustration{ width: 100%; min-width: 100%; margin-right: 0; padding-top:20px; } .breadcrumbs, .lead{ display:none; } .meta{ position:relative; border-top: none; border-bottom: none; padding: 0; .title{ font: 700 22px "Golos Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Ubuntu,Arial,sans-serif; a{ color: #222; font-size: 18px; } } } } }