.book-toggle { width: calc(100% - 60px); background-color: transparent; height: calc(100vh / 1.8); transition: all 0.3s; &__info { width: calc(100% / 2.5); &--link { transition: all 0.3s; width: fit-content; border-radius: 4px; padding: 10px 35px; align-self: end; margin-top: 60px; &:hover{ border-color: $green; color: $green; } } } &__img { height: 90%; border-radius: 8px; img{ width : 100%; height : 100%; } } p { margin-top: 20px; } &-light { strong, p { color: $gray5; } .book-toggle__info--link{ box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1); color: $gray7; } } &-dark { strong, p { color: $gray12; } .book-toggle__info--link{ border: 1px solid white; color: white; } } } @media screen and (min-width: 1441px) { .book-toggle { strong { font-size: 21px; } p { font-size: 14px; } a { font-size: 16px; } } } @media screen and (min-width: 1008px) and (max-width: 1440px) { .book-toggle { strong { font-size: calc(100vw / 70); } p { font-size: calc(100vw / 100); } a { font-size: calc(100vw / 80); } } }