.component.single-item { & > .std-row { align-items: flex-start; flex-wrap: nowrap; @include media("max", "md") { flex-wrap: wrap; flex-direction: column; } } .component.thumbnail { .thumbnail-img, .poster-placeholder { width: 320px; @include media("max", "md") { width: 100%; } } } .item-info { display: flex; flex-direction: column; gap: $std-mg-sm; .title { font-size: $fsize-xl; font-weight: normal; strong { color: $color-primary; } } .time-period { font-size: $fsize-lg; &::first-letter { text-transform: uppercase; } } .genres { margin-bottom: 5px; } .team { .voice { } } .description { line-height: 1.3em; } .control-panel { width: 100%; margin: $std-mg-md 0; } } .tabs { margin-top: $std-mg-md; .tabs-content { height: 660px; @include media("max", "lg") { height: 520px; } @include media("max", "md") { height: 410px; } @include media("max", "sm") { height: 300px; } } } .player { width: 100%; height: 100%; overflow: hidden; } }