.home #content { width: 100%; @media #{$breakpoint-extra-large} { max-width: 1440px; } } .latest-books { margin: 4rem 0 8rem; .slider { margin: 0 auto; position: relative; } .books { display: flex; flex-direction: column; align-items: center; padding-left: 0; } .booknav { position: absolute; top: 0; left: calc(50vw - 14.03125rem); width: 100%; max-width: 28.0625rem; height: calc(100%); display: flex; flex-direction: row; justify-content: center; } .previous, .next { display: flex; flex-direction: column; justify-content: center; position: absolute; width: rem(25); height: 100%; svg { width: rem(25); height: rem(25); path { fill: var(--primary, $brand); } } } .previous { left: 0; } .next { right: 0; } @media #{$breakpoint-large} { .slider { width: calc(100vw - 5.125rem); max-width: 75rem; } .books { flex-direction: row; justify-content: center; .book { margin-right: 1rem; margin-left: 1rem; } } .booknav { width: calc(100% + 4rem); max-width: 100vw; left: -2rem; } .previous, .next { width: rem(32); svg { width: rem(32); height: rem(32); } } } .catalog-link { text-align: center; } }