.home { .widget, .latest-books { height: 445px; background-color: $white; text-align: center; h3 { font-size: em(30); font-weight: 600; letter-spacing: 2px; line-height: (36/30); margin: 0; &::before { content: ""; display: block; margin: 0 auto 1em; width: 46px; height: 5px; background-color: $brand-secondary; } } p { font-size: em(16); line-height: (32/16); } } .widget { display: flex; flex-direction: column; justify-content: center; align-items: center; } .blocks.blocks-2 { .widget_text:nth-child(2) { border: solid 2px $brand-primary; box-shadow: unset; } } .blocks.blocks-4 { .widget_text:nth-child(2) { color: $white; background: $brand-secondary; h3::before { background-color: $white; } .button { border-color: $white; background: transparent; &:hover, &:focus { color: $brand-secondary; background: $white; } } } .widget_text:nth-child(3) { border: solid 2px $brand-primary; box-shadow: unset; } } .latest-books { box-shadow: unset; height: auto; padding-bottom: 0 0 50px; h3 { margin-top: 70px; } .book, .slick-slide { width: 100vw; height: 386px; margin: 45px 0 0; padding: 0 29.5px; border: solid 2px; a { font-family: $font-family-sans-serif; color: $white; text-decoration: none; } .subject { height: 91px; margin-top: 24px; font-size: em(24); } .title { height: 329px - 115px; font-size: em(30); font-weight: 500; } .read-more { font-size: em(18); } } .navigation { a { &.slick-disabled { opacity: 0; } } } } } @media (min-width: $medium) { .home { .wrap { margin-top: -366px; } .widget { width: 775px; margin-bottom: 119px; padding: 0 90px; box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); h3 { font-size: em(48); line-height: (56/48); &::before { width: 74px; } } p { font-size: em(18); line-height: (32/18); } } .latest-books { width: 100%; .books { flex-direction: row; justify-content: space-between; } .book, .slick-slide { width: 300px; margin-right: 30px; &:last-child { margin-right: 0; } } } } } @media (min-width: $large) { .home { .widget { width: 1115px; height: 494px; } .latest-books { width: 1200px; margin-bottom: 0; .book, .slick-slide { width: 367px; margin-right: 50px; &:last-child { margin-right: 0; } } } } } @media (min-width: $extra-large) { .home { .widget { width: 1115px; box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); } .blocks.blocks-4 { display: flex; flex-flow: row wrap; width: 1615px; .widget_text { width: 1115px; margin-right: auto; margin-left: auto; } .widget_text:nth-child(1), .widget_text:nth-child(2) { width: 775px; } .widget_text:nth-child(1) { margin-right: 65px; } } } }