.book { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; max-width: 22.9375rem; height: 24.125rem; margin: 0 0 2rem; padding: 1.5rem 1rem 2rem; @media #{$breakpoint-not-small} { padding: 1.5rem 1.85rem 2.1875rem; } border: solid 2px var(--accent); background: var(--accent); a, p { font-family: $font-family-sans-serif; color: var(--accent-fg); } a { margin: 0; text-decoration: none; text-align: center; hyphens: auto; } &__title { margin: 0; font-size: 1.25rem; @media #{$breakpoint-not-small} { font-size: 1.75rem; } font-weight: 500; line-height: 1.2; text-align: left; } &__subject { margin: 0; font-size: 0.75rem; @media #{$breakpoint-not-small} { font-size: 1rem; } text-align: left; } &__institutions { margin: .5rem 0 0; font-size: 0.875rem; text-align: left; display: flex; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } &__read-more { margin: auto 0 0; font-size: 1rem; @media #{$breakpoint-not-small} { font-size: 1.125rem; } text-align: left; a { svg { width: 1rem; height: 1rem; @media #{$breakpoint-not-small} { width: 1.125rem; height: 1.125rem; margin-left: 0.5rem; } vertical-align: middle; } } } &:last-child { margin-bottom: 0; @media #{$breakpoint-large} { margin-bottom: 2rem; } } }