.header { position: relative; width: 100%; height: 310px; } .backdrop { position: absolute; z-index: -1; width: 100%; height: 100%; background-size: cover; } .backdropOverlay { position: absolute; width: 100%; height: 100%; background: var(--black); opacity: 0.7; } .headerContent { display: flex; padding: 30px; width: 100%; height: 100%; color: var(--white); } .cover { flex-shrink: 0; margin-right: 35px; height: 250px; } .info { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; } .titleRow { position: relative; display: flex; justify-content: space-between; flex: 0 0 auto; } .titleContainer { display: flex; margin-top: -5px; } .title { font-weight: 300; font-size: 50px; line-height: 60px; } .toggleMonitoredContainer { align-self: center; } .monitorToggleButton { composes: toggleButton from '~Components/MonitorToggleButton.css'; width: 40px; &:hover { color: var(--iconButtonHoverLightColor); } } .alternateTitlesIconContainer { align-self: flex-end; margin-left: 20px; } .details { margin-bottom: 8px; font-weight: 300; font-size: 20px; } .authorLink { composes: link from '~Components/Link/Link.css'; margin-right: 15px; color: var(--white); } .duration { margin-right: 15px; } .detailsLabel { composes: label from '~Components/Label.css'; margin: 5px 10px 5px 0; } .sizeOnDisk, .qualityProfileName, .links, .tags { margin-left: 8px; font-weight: 300; font-size: 17px; } .overview { flex: 1 1 auto; margin-top: 4px; min-height: 0; font-size: $intermediateFontSize; } @media only screen and (max-width: $breakpointSmall) { .headerContent { padding: 15px; } .title { font-weight: 300; font-size: 30px; line-height: 30px; } } @media only screen and (max-width: $breakpointLarge) { .cover { display: none; } }