.home { .block { flex-direction: column; justify-content: center; align-items: center; padding: 0 0.78125rem; display: flex; height: 445px; background-color: $white; margin-left: auto; margin-right: auto; text-align: center; p { font-size: em(16); line-height: (32/16); } } .blocks.blocks-2, .blocks.blocks-3 { .widget_text:nth-child(2) { margin-right: 0.5rem; margin-left: 0.5rem; border: solid 2px var(--brand-primary, $brand-primary); box-shadow: unset; } } .blocks.blocks-4 { .widget_text:nth-child(2) { color: $white; background: var(--brand-secondary, $brand-secondary); h3 { color: $white; &::before { background-color: $white; } } .button { border-color: $white; background: transparent; &:hover, &:focus { color: var(--brand-secondary, $brand-secondary); background: $white; } } } .widget_text:nth-child(3) { margin-top: 2rem; margin-right: 0.5rem; margin-left: 0.5rem; border: solid 2px var(--brand-primary, $brand-primary); box-shadow: unset; } } .block, .latest-books { h3 { font-size: em(30); font-weight: 600; color: var(--brand-primary, $brand-primary); letter-spacing: 2px; line-height: (36/30); margin: 0; &::before { content: ""; display: block; margin: 0 auto 1em; width: 46px; height: 5px; background-color: var(--brand-secondary, $brand-secondary); } } } .latest-books { height: auto; padding: 0 0 50px; h3 { margin-top: 4.375rem; margin-bottom: 2.8125rem; } .track { max-width: 22.9375rem; margin-left: auto; margin-right: auto; padding: 0 0.46875rem; } .books { padding: 0; width: 100%; } .book { width: 100%; max-width: 22.9375rem; height: 24.125rem; margin: 0 0 2rem; padding: 1.5rem 1.85rem 2.1875rem; border-style: solid; border-width: 2px; a { font-family: $font-family-sans-serif; color: $white; text-decoration: none; } .subject { height: 4.625rem; font-size: em(24); } .title { height: 13rem; font-size: em(30); font-weight: 500; line-height: (40/30); } .read-more { font-size: em(18); } } .previous, .next { width: auto; height: auto; svg { path { fill: var(--brand-secondary, $brand-secondary); } } } } } @media (min-width: $medium) { .home { .wrap { margin-top: -366px; } .block { width: 775px; margin-bottom: 119px; padding: 0 90px; box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); &:last-child { margin-bottom: 4.0625rem; } h3 { font-size: em(48); line-height: (56/48); &::before { width: 74px; } } p { font-size: em(18); line-height: (32/18); } } .blocks.blocks-2 .widget_text:nth-child(2), .blocks.blocks-3 .widget_text:nth-child(2), .blocks.blocks-4 .widget_text:nth-child(3) { margin-left: auto; margin-right: auto; } .latest-books { width: 100%; margin-left: auto; margin-right: auto; h3 { margin-bottom: 4.375rem; } .track { flex-wrap: nowrap; width: 100%; max-width: 100%; margin: 0; padding: 0; } .next, .previous { flex: 0 0 2.4375rem; svg { width: 2.4375rem; height: 1.875rem; } } .next { margin-left: 2.625rem; margin-right: 0.9375rem; } .previous { margin-left: 0.9375rem; margin-right: 2.625rem; } .books { width: auto; min-width: 50rem; flex-direction: row; justify-content: space-between; } .book { width: 30%; max-width: 19.54rem; } } } } @media (min-width: $large) { .home { .block { width: 1115px; height: 494px; } .latest-books { width: 100%; margin-bottom: 0; .track { width: 100%; margin: 0 auto; max-width: 87rem; } .books { width: 100%; max-width: 75rem; } .book { min-width: 19.54rem; max-width: 22.9375rem; } } } } @media (min-width: $extra-large) { .home { .block { 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; } } } }