:root {
--tm-accent: #156dfc;
--tm-green: #00f58b;
--tm-black: #050505;
--tm-gray: #eeeeee;
--tm-line: #d8d8d8;
--tm-wrap: min(920px, calc(100% - 32px));
}
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body.tm-site {
margin: 0;
background: #fff;
color: var(--tm-black);
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 0;
}
.tm-site a {
color: inherit;
text-decoration: none;
}
.tm-site a:hover {
color: var(--tm-accent);
}
.tm-header {
background: var(--tm-green);
color: var(--tm-black);
border-bottom: 1px solid var(--tm-black);
}
.tm-header__inner {
width: var(--tm-wrap);
min-height: 44px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 12px;
}
.tm-menu-dot {
width: 14px;
display: grid;
gap: 3px;
}
.tm-menu-dot span {
display: block;
height: 2px;
background: var(--tm-black);
}
.tm-logo {
font-size: 27px;
line-height: 1;
font-weight: 900;
letter-spacing: 0;
}
.tm-nav {
display: flex;
align-items: center;
gap: 17px;
margin-left: 10px;
font-size: 8px;
line-height: 1;
font-weight: 900;
}
.tm-login {
margin-left: auto;
padding: 6px 13px;
background: #fff;
font-size: 8px;
font-weight: 900;
text-transform: uppercase;
}
.tm-rail {
background: #fff;
}
.tm-rail__inner {
width: var(--tm-wrap);
margin: 0 auto;
min-height: 40px;
display: flex;
align-items: center;
gap: 11px;
color: #333;
font-size: 8px;
line-height: 1;
font-weight: 900;
}
.tm-rail strong {
padding: 4px 6px;
background: #e8e8e8;
color: var(--tm-black);
}
.tm-home-top,
.tm-page,
.tm-section,
.tm-single {
width: var(--tm-wrap);
margin: 0 auto;
}
.tm-home-grid {
display: grid;
grid-template-columns: 220px minmax(0, 1fr) 280px;
gap: 32px;
align-items: start;
padding: 22px 0 54px;
}
.tm-home-main__image,
.tm-card__image,
.tm-mini-card__image,
.tm-list-item__image,
.tm-single__image {
display: block;
overflow: hidden;
background: var(--tm-black);
}
.tm-home-main__image {
aspect-ratio: 16 / 10;
}
.tm-mini-card__image {
aspect-ratio: 4 / 3;
}
.tm-home-main__image img,
.tm-card__image img,
.tm-mini-card__image img,
.tm-list-item__image img,
.tm-single__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.tm-home-main p,
.tm-mini-card p,
.tm-card p,
.tm-kicker {
margin: 8px 0 5px;
color: var(--tm-green);
font-size: 8px;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
}
.tm-home-main h1 {
max-width: 590px;
margin: 0;
font-size: 44px;
line-height: .94;
font-weight: 900;
overflow-wrap: normal;
word-break: normal;
}
.tm-mini-card h2,
.tm-card h3 {
margin: 0;
font-size: 13px;
line-height: 1.05;
font-weight: 900;
}
.tm-albums {
background: var(--tm-green);
padding: 28px 0;
}
.tm-albums__inner {
width: var(--tm-wrap);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
.tm-albums a {
min-height: 92px;
display: flex;
align-items: end;
padding: 10px;
background: rgba(255, 255, 255, .22);
font-size: 12px;
line-height: 1.05;
font-weight: 900;
}
.tm-section {
padding: 30px 0 22px;
}
.tm-section__title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.tm-section__title::after {
content: "";
height: 4px;
flex: 1;
background: var(--tm-black);
}
.tm-section__title h1,
.tm-section__title h2 {
margin: 0;
font-size: 15px;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
}
.tm-card-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.tm-card__image {
aspect-ratio: 4 / 3;
margin-bottom: 10px;
}
.tm-archive-layout {
display: grid;
grid-template-columns: minmax(0, 700px) 260px;
gap: 48px;
align-items: start;
}
.tm-list-item {
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
gap: 18px;
padding: 16px 0;
border-bottom: 1px solid var(--tm-line);
}
.tm-list-item__image {
width: 230px;
height: 150px;
}
.tm-list-item__top {
display: flex;
justify-content: space-between;
gap: 14px;
margin-bottom: 4px;
min-width: 0;
}
.tm-list-item__top .tm-kicker {
margin: 0;
}
.tm-list-item time {
color: #777;
font-size: 9px;
line-height: 1;
font-weight: 900;
letter-spacing: .08em;
}
.tm-list-item h2 {
margin: 0;
font-size: 22px;
line-height: 1.03;
font-weight: 900;
overflow-wrap: normal;
word-break: normal;
}
.tm-author {
margin: 7px 0 0;
color: #777;
font-size: 9px;
line-height: 1;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.tm-excerpt {
margin-top: 9px;
color: #333;
font-size: 13px;
line-height: 1.35;
}
.tm-excerpt p {
margin: 0;
}
.tm-trending {
background: #f2f2f2;
border: 1px solid #ddd;
padding: 12px;
min-width: 0;
}
.tm-trending h2 {
margin: 0 0 10px;
color: var(--tm-accent);
font-size: 24px;
line-height: .9;
font-weight: 900;
text-transform: uppercase;
}
.tm-trending article {
display: grid;
grid-template-columns: 24px 1fr;
gap: 10px;
padding: 10px 0;
border-top: 1px solid #ccc;
min-width: 0;
}
.tm-trending span {
color: var(--tm-accent);
font-size: 22px;
line-height: 1;
font-weight: 900;
}
.tm-trending h3 {
margin: 0;
font-size: 12px;
line-height: 1.15;
font-weight: 900;
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
}
.tm-home-latest {
padding: 16px;
}
.tm-home-latest h2 {
font-size: 32px;
line-height: .95;
}
.tm-home-latest article {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 16px;
}
.tm-home-latest h3 {
font-size: 14px;
line-height: 1.08;
}
.tm-home-latest time {
color: var(--tm-black);
font-size: 14px;
line-height: 1;
font-weight: 900;
white-space: nowrap;
}
.tm-billboard-grid {
grid-template-columns: 145px minmax(0, 1fr) 190px;
gap: 22px;
padding: 14px 0 26px;
}
.tm-home-side {
display: grid;
gap: 16px;
}
.tm-billboard-grid .tm-mini-card__image {
aspect-ratio: 1 / 1;
}
.tm-billboard-grid .tm-mini-card h2 {
font-size: 11px;
line-height: 1.05;
}
.tm-billboard-grid .tm-home-main__image {
aspect-ratio: 16 / 10.5;
}
.tm-billboard-grid .tm-home-main h1 {
max-width: 100%;
font-size: 28px;
line-height: .9;
text-transform: uppercase;
text-align: center;
}
.tm-chart-box {
background: var(--tm-green);
color: var(--tm-black);
padding: 13px;
}
.tm-chart-box h2 {
margin: 0;
color: var(--tm-accent);
font-size: 22px;
line-height: .9;
font-weight: 900;
text-transform: uppercase;
}
.tm-chart-box p {
margin: 2px 0 10px;
font-size: 8px;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
}
.tm-chart-box article {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 8px;
padding: 7px 0;
border-top: 1px solid rgba(0, 0, 0, .2);
}
.tm-chart-box span {
color: var(--tm-accent);
font-size: 18px;
line-height: 1;
font-weight: 900;
}
.tm-chart-box a {
font-size: 10px;
line-height: 1.05;
font-weight: 900;
}
.tm-chart-box--small {
min-height: 210px;
display: flex;
flex-direction: column;
justify-content: center;
}
.tm-chart-box--small > a {
display: inline-block;
align-self: flex-start;
margin-top: 12px;
padding: 7px 12px;
background: #fff;
font-size: 9px;
text-transform: uppercase;
}
.tm-compact-section {
padding-top: 14px;
}
.tm-four-up {
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.tm-four-up .tm-card h3,
.tm-deep-grid h3 {
font-size: 11px;
line-height: 1.08;
}
.tm-rec-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 18px;
}
.tm-rec-main {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 14px;
grid-row: span 2;
}
.tm-rec-main .tm-card__image {
aspect-ratio: 4 / 3;
margin: 0;
}
.tm-rec-main h3 {
margin: 0;
font-size: 20px;
line-height: .98;
text-transform: uppercase;
}
.tm-rec-item,
.tm-deep-item,
.tm-video-list article {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--tm-line);
}
.tm-rec-item .tm-card__image,
.tm-deep-item .tm-card__image,
.tm-video-list .tm-mini-card__image {
width: 92px;
height: 62px;
margin: 0;
}
.tm-rec-item h3,
.tm-deep-item h3,
.tm-video-list h3 {
margin: 0;
font-size: 12px;
line-height: 1.08;
}
.tm-video-band {
margin-top: 34px;
background: #ededed;
}
.tm-video-inner {
padding-top: 26px;
padding-bottom: 28px;
}
.tm-video-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 235px;
gap: 18px;
}
.tm-video-player a {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--tm-black);
}
.tm-video-player img,
.tm-video-player .tm-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(.68);
}
.tm-video-player span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 54px;
height: 54px;
display: grid;
place-items: center;
border: 2px solid #fff;
border-radius: 50%;
color: #fff;
font-size: 9px;
font-weight: 900;
text-transform: uppercase;
}
.tm-video-list {
display: grid;
gap: 10px;
}
.tm-deep-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 18px;
}
.tm-deep-main {
grid-row: span 3;
}
.tm-deep-main .tm-card__image {
aspect-ratio: 4 / 3;
}
.tm-deep-main h3 {
margin: 0;
font-size: 22px;
line-height: .95;
text-transform: uppercase;
}
.tm-side-stack {
display: grid;
gap: 18px;
}
.tm-archive-heading {
padding-top: 22px;
}
.tm-pagination {
margin-top: 20px;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.tm-single {
max-width: 680px;
padding: 34px 0 64px;
}
.tm-single h1 {
margin: 0;
font-size: clamp(34px, 5.2vw, 60px);
line-height: .96;
font-weight: 900;
}
.tm-single__meta {
display: flex;
gap: 14px;
margin: 14px 0 22px;
color: #777;
font-size: 11px;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
}
.tm-single__image {
aspect-ratio: 16 / 10;
margin-bottom: 28px;
}
.tm-single__content {
font-size: 18px;
line-height: 1.65;
}
.tm-single__content p {
margin: 0 0 1.35em;
}
.tm-placeholder {
min-height: 100%;
height: 100%;
display: grid;
place-items: center;
background: var(--tm-accent);
color: var(--tm-green);
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
}
.tm-footer {
margin-top: 54px;
padding: 46px 0 20px;
background: #ececec;
}
.tm-footer__inner {
width: var(--tm-wrap);
margin: 0 auto;
display: grid;
grid-template-columns: 220px 1fr 1.2fr;
gap: 42px;
align-items: start;
}
.tm-footer__label,
.tm-newsletter label {
margin: 0 0 10px;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.tm-socials {
margin: 0;
color: var(--tm-green);
font-weight: 900;
}
.tm-newsletter div {
display: flex;
}
.tm-newsletter input {
min-width: 0;
flex: 1;
border: 0;
padding: 11px;
}
.tm-newsletter button {
border: 0;
padding: 11px 16px;
background: var(--tm-green);
color: var(--tm-black);
font-weight: 900;
}
.tm-copy {
width: var(--tm-wrap);
margin: 36px auto 0;
color: #555;
font-size: 10px;
}
@media (max-width: 900px) {
:root {
--tm-wrap: min(100% - 24px, 620px);
}
.tm-header__inner,
.tm-rail__inner,
.tm-home-top,
.tm-page,
.tm-section,
.tm-single,
.tm-footer__inner,
.tm-copy {
width: var(--tm-wrap);
}
.tm-nav {
display: none;
}
.tm-home-grid,
.tm-archive-layout,
.tm-billboard-grid,
.tm-rec-grid,
.tm-video-grid,
.tm-deep-grid,
.tm-footer__inner {
grid-template-columns: 1fr;
gap: 24px;
}
.tm-card-row,
.tm-albums__inner {
grid-template-columns: repeat(2, 1fr);
}
.tm-home-side {
grid-template-columns: repeat(2, 1fr);
}
.tm-rec-main {
grid-template-columns: 1fr;
}
.tm-rec-main .tm-card__image {
width: 100%;
}
.tm-video-list {
grid-template-columns: 1fr;
}
.tm-list-item {
grid-template-columns: 132px minmax(0, 1fr);
gap: 12px;
}
.tm-list-item__image {
width: 132px;
height: 94px;
}
.tm-list-item h2 {
font-size: 17px;
}
.tm-home-main h1 {
font-size: 30px;
}
.tm-home-latest article {
grid-template-columns: minmax(0, 1fr) auto;
}
.tm-excerpt {
display: none;
}
}
@media (max-width: 560px) {
.tm-logo {
font-size: 24px;
}
.tm-rail__inner {
overflow-x: auto;
justify-content: flex-start;
white-space: nowrap;
}
.tm-home-side,
.tm-card-row,
.tm-four-up {
grid-template-columns: 1fr;
}
.tm-list-item,
.tm-rec-item,
.tm-deep-item,
.tm-video-list article {
grid-template-columns: 112px minmax(0, 1fr);
}
.tm-list-item__image {
width: 112px;
height: 82px;
}
.tm-billboard-grid .tm-home-main h1,
.tm-deep-main h3,
.tm-rec-main h3 {
font-size: 24px;
}
}html, body, div, span, applet, object, iframe, video, audio,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, textarea, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, address, section {
font-family: inherit;
font-size: 100%;
line-height: inherit;
font-weight: inherit;
font-style: inherit;
outline: 0;
-ms-word-wrap: break-word;
word-wrap: break-word;
}
applet, object, iframe, video, audio,
fieldset, form, label, legend, input, textarea, button,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
}
html {
font-size: 100%;  -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html:not(.edit-post-visual-editor) {
height: 100%;
overflow-y: scroll !important;
overflow-x: hidden;
}
html:not(.edit-post-visual-editor),
body:not(.edit-post-visual-editor) {
margin: 0;
padding: 0;
width: 100%;
}
div.ui-widget,
div.ui-widget .ui-widget,
div.ui-widget .ui-widget-header,
div.ui-widget .ui-widget-content,
div.ui-accordion .ui-accordion-header,
div.ui-state-default,
div.ui-widget-content .ui-state-default,
div.ui-widget-header .ui-state-default {
font-family: inherit;
font-size: 1em;
line-height: inherit;
}
div.ui-widget,
div.ui-widget .ui-widget,
div.ui-widget .ui-widget-header,
div.ui-widget .ui-widget-content,
div.ui-accordion .ui-accordion-header,
div.ui-state-default,
div.ui-widget-content .ui-state-default,
div.ui-widget-header .ui-state-default {
color: inherit;
background: none;
border-style: none;
border-radius: 0;
}
div.ui-datepicker {
background-color: #fff;
}
div.ui-accordion .ui-accordion-header {
padding: 0;
}
div.ui-accordion .ui-accordion-header-icon {
display: none;
}
div.ui-tabs,
div.ui-tabs .ui-tabs-panel,
div.ui-tabs .ui-tabs-nav {
padding: 0;
}
div.ui-tabs .ui-tabs-nav li {
float: none;
margin: 0;
}
div.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float: none;
}  .rounded_none {
border-radius: 0;
}
.rounded_tiny {
border-radius: 4px;
}
.rounded_small {
border-radius: 6px;
}
.rounded_medium {
border-radius: 10px;
}
.rounded_large {
border-radius: 15px;
}
.rounded {
border-radius: 50%;
} .overflow_hidden {
overflow: hidden !important;
}
.overflow_x_hidden {
overflow-x: hidden !important;
}
.overflow_y_hidden {
overflow-y: hidden !important;
}:root {
--tm-accent: #156dfc;
--tm-green: #00f58b;
--tm-black: #050505;
--tm-gray: #eeeeee;
--tm-line: #d8d8d8;
--tm-wrap: min(920px, calc(100% - 32px));
}
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body.tm-site {
margin: 0;
background: #fff;
color: var(--tm-black);
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 0;
}
.tm-site a {
color: inherit;
text-decoration: none;
}
.tm-site a:hover {
color: var(--tm-accent);
}
.tm-header {
background: var(--tm-green);
color: var(--tm-black);
border-bottom: 1px solid var(--tm-black);
}
.tm-header__inner {
width: var(--tm-wrap);
min-height: 44px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 12px;
}
.tm-menu-dot {
width: 14px;
display: grid;
gap: 3px;
}
.tm-menu-dot span {
display: block;
height: 2px;
background: var(--tm-black);
}
.tm-logo {
font-size: 27px;
line-height: 1;
font-weight: 900;
letter-spacing: 0;
}
.tm-nav {
display: flex;
align-items: center;
gap: 17px;
margin-left: 10px;
font-size: 8px;
line-height: 1;
font-weight: 900;
}
.tm-login {
margin-left: auto;
padding: 6px 13px;
background: #fff;
font-size: 8px;
font-weight: 900;
text-transform: uppercase;
}
.tm-rail {
background: #fff;
}
.tm-rail__inner {
width: var(--tm-wrap);
margin: 0 auto;
min-height: 40px;
display: flex;
align-items: center;
gap: 11px;
color: #333;
font-size: 8px;
line-height: 1;
font-weight: 900;
}
.tm-rail strong {
padding: 4px 6px;
background: #e8e8e8;
color: var(--tm-black);
}
.tm-home-top,
.tm-page,
.tm-section,
.tm-single {
width: var(--tm-wrap);
margin: 0 auto;
}
.tm-home-grid {
display: grid;
grid-template-columns: 220px minmax(0, 1fr) 280px;
gap: 32px;
align-items: start;
padding: 22px 0 54px;
}
.tm-home-main__image,
.tm-card__image,
.tm-mini-card__image,
.tm-list-item__image,
.tm-single__image {
display: block;
overflow: hidden;
background: var(--tm-black);
}
.tm-home-main__image {
aspect-ratio: 16 / 10;
}
.tm-mini-card__image {
aspect-ratio: 4 / 3;
}
.tm-home-main__image img,
.tm-card__image img,
.tm-mini-card__image img,
.tm-list-item__image img,
.tm-single__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.tm-home-main p,
.tm-mini-card p,
.tm-card p,
.tm-kicker {
margin: 8px 0 5px;
color: var(--tm-green);
font-size: 8px;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
}
.tm-home-main h1 {
max-width: 590px;
margin: 0;
font-size: 44px;
line-height: .94;
font-weight: 900;
overflow-wrap: normal;
word-break: normal;
}
.tm-mini-card h2,
.tm-card h3 {
margin: 0;
font-size: 13px;
line-height: 1.05;
font-weight: 900;
}
.tm-albums {
background: var(--tm-green);
padding: 28px 0;
}
.tm-albums__inner {
width: var(--tm-wrap);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
.tm-albums a {
min-height: 92px;
display: flex;
align-items: end;
padding: 10px;
background: rgba(255, 255, 255, .22);
font-size: 12px;
line-height: 1.05;
font-weight: 900;
}
.tm-section {
padding: 30px 0 22px;
}
.tm-section__title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.tm-section__title::after {
content: "";
height: 4px;
flex: 1;
background: var(--tm-black);
}
.tm-section__title h1,
.tm-section__title h2 {
margin: 0;
font-size: 15px;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
}
.tm-card-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.tm-card__image {
aspect-ratio: 4 / 3;
margin-bottom: 10px;
}
.tm-archive-layout {
display: grid;
grid-template-columns: minmax(0, 700px) 260px;
gap: 48px;
align-items: start;
}
.tm-list-item {
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
gap: 18px;
padding: 16px 0;
border-bottom: 1px solid var(--tm-line);
}
.tm-list-item__image {
width: 230px;
height: 150px;
}
.tm-list-item__top {
display: flex;
justify-content: space-between;
gap: 14px;
margin-bottom: 4px;
min-width: 0;
}
.tm-list-item__top .tm-kicker {
margin: 0;
}
.tm-list-item time {
color: #777;
font-size: 9px;
line-height: 1;
font-weight: 900;
letter-spacing: .08em;
}
.tm-list-item h2 {
margin: 0;
font-size: 22px;
line-height: 1.03;
font-weight: 900;
overflow-wrap: normal;
word-break: normal;
}
.tm-author {
margin: 7px 0 0;
color: #777;
font-size: 9px;
line-height: 1;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.tm-excerpt {
margin-top: 9px;
color: #333;
font-size: 13px;
line-height: 1.35;
}
.tm-excerpt p {
margin: 0;
}
.tm-trending {
background: #f2f2f2;
border: 1px solid #ddd;
padding: 12px;
min-width: 0;
}
.tm-trending h2 {
margin: 0 0 10px;
color: var(--tm-accent);
font-size: 24px;
line-height: .9;
font-weight: 900;
text-transform: uppercase;
}
.tm-trending article {
display: grid;
grid-template-columns: 24px 1fr;
gap: 10px;
padding: 10px 0;
border-top: 1px solid #ccc;
min-width: 0;
}
.tm-trending span {
color: var(--tm-accent);
font-size: 22px;
line-height: 1;
font-weight: 900;
}
.tm-trending h3 {
margin: 0;
font-size: 12px;
line-height: 1.15;
font-weight: 900;
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
}
.tm-home-latest {
padding: 16px;
}
.tm-home-latest h2 {
font-size: 32px;
line-height: .95;
}
.tm-home-latest article {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 16px;
}
.tm-home-latest h3 {
font-size: 14px;
line-height: 1.08;
}
.tm-home-latest time {
color: var(--tm-black);
font-size: 14px;
line-height: 1;
font-weight: 900;
white-space: nowrap;
}
.tm-billboard-grid {
grid-template-columns: 145px minmax(0, 1fr) 190px;
gap: 22px;
padding: 14px 0 26px;
}
.tm-home-side {
display: grid;
gap: 16px;
}
.tm-billboard-grid .tm-mini-card__image {
aspect-ratio: 1 / 1;
}
.tm-billboard-grid .tm-mini-card h2 {
font-size: 11px;
line-height: 1.05;
}
.tm-billboard-grid .tm-home-main__image {
aspect-ratio: 16 / 10.5;
}
.tm-billboard-grid .tm-home-main h1 {
max-width: 100%;
font-size: 28px;
line-height: .9;
text-transform: uppercase;
text-align: center;
}
.tm-chart-box {
background: var(--tm-green);
color: var(--tm-black);
padding: 13px;
}
.tm-chart-box h2 {
margin: 0;
color: var(--tm-accent);
font-size: 22px;
line-height: .9;
font-weight: 900;
text-transform: uppercase;
}
.tm-chart-box p {
margin: 2px 0 10px;
font-size: 8px;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
}
.tm-chart-box article {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 8px;
padding: 7px 0;
border-top: 1px solid rgba(0, 0, 0, .2);
}
.tm-chart-box span {
color: var(--tm-accent);
font-size: 18px;
line-height: 1;
font-weight: 900;
}
.tm-chart-box a {
font-size: 10px;
line-height: 1.05;
font-weight: 900;
}
.tm-chart-box--small {
min-height: 210px;
display: flex;
flex-direction: column;
justify-content: center;
}
.tm-chart-box--small > a {
display: inline-block;
align-self: flex-start;
margin-top: 12px;
padding: 7px 12px;
background: #fff;
font-size: 9px;
text-transform: uppercase;
}
.tm-compact-section {
padding-top: 14px;
}
.tm-four-up {
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.tm-four-up .tm-card h3,
.tm-deep-grid h3 {
font-size: 11px;
line-height: 1.08;
}
.tm-rec-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 18px;
}
.tm-rec-main {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 14px;
grid-row: span 2;
}
.tm-rec-main .tm-card__image {
aspect-ratio: 4 / 3;
margin: 0;
}
.tm-rec-main h3 {
margin: 0;
font-size: 20px;
line-height: .98;
text-transform: uppercase;
}
.tm-rec-item,
.tm-deep-item,
.tm-video-list article {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--tm-line);
}
.tm-rec-item .tm-card__image,
.tm-deep-item .tm-card__image,
.tm-video-list .tm-mini-card__image {
width: 92px;
height: 62px;
margin: 0;
}
.tm-rec-item h3,
.tm-deep-item h3,
.tm-video-list h3 {
margin: 0;
font-size: 12px;
line-height: 1.08;
}
.tm-video-band {
margin-top: 34px;
background: #ededed;
}
.tm-video-inner {
padding-top: 26px;
padding-bottom: 28px;
}
.tm-video-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 235px;
gap: 18px;
}
.tm-video-player a {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--tm-black);
}
.tm-video-player img,
.tm-video-player .tm-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(.68);
}
.tm-video-player span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 54px;
height: 54px;
display: grid;
place-items: center;
border: 2px solid #fff;
border-radius: 50%;
color: #fff;
font-size: 9px;
font-weight: 900;
text-transform: uppercase;
}
.tm-video-list {
display: grid;
gap: 10px;
}
.tm-deep-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 18px;
}
.tm-deep-main {
grid-row: span 3;
}
.tm-deep-main .tm-card__image {
aspect-ratio: 4 / 3;
}
.tm-deep-main h3 {
margin: 0;
font-size: 22px;
line-height: .95;
text-transform: uppercase;
}
.tm-side-stack {
display: grid;
gap: 18px;
}
.tm-archive-heading {
padding-top: 22px;
}
.tm-pagination {
margin-top: 20px;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.tm-single {
max-width: 680px;
padding: 34px 0 64px;
}
.tm-single h1 {
margin: 0;
font-size: clamp(34px, 5.2vw, 60px);
line-height: .96;
font-weight: 900;
}
.tm-single__meta {
display: flex;
gap: 14px;
margin: 14px 0 22px;
color: #777;
font-size: 11px;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
}
.tm-single__image {
aspect-ratio: 16 / 10;
margin-bottom: 28px;
}
.tm-single__content {
font-size: 18px;
line-height: 1.65;
}
.tm-single__content p {
margin: 0 0 1.35em;
}
.tm-placeholder {
min-height: 100%;
height: 100%;
display: grid;
place-items: center;
background: var(--tm-accent);
color: var(--tm-green);
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
}
.tm-footer {
margin-top: 54px;
padding: 46px 0 20px;
background: #ececec;
}
.tm-footer__inner {
width: var(--tm-wrap);
margin: 0 auto;
display: grid;
grid-template-columns: 220px 1fr 1.2fr;
gap: 42px;
align-items: start;
}
.tm-footer__label,
.tm-newsletter label {
margin: 0 0 10px;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
}
.tm-socials {
margin: 0;
color: var(--tm-green);
font-weight: 900;
}
.tm-newsletter div {
display: flex;
}
.tm-newsletter input {
min-width: 0;
flex: 1;
border: 0;
padding: 11px;
}
.tm-newsletter button {
border: 0;
padding: 11px 16px;
background: var(--tm-green);
color: var(--tm-black);
font-weight: 900;
}
.tm-copy {
width: var(--tm-wrap);
margin: 36px auto 0;
color: #555;
font-size: 10px;
}
@media (max-width: 900px) {
:root {
--tm-wrap: min(100% - 24px, 620px);
}
.tm-header__inner,
.tm-rail__inner,
.tm-home-top,
.tm-page,
.tm-section,
.tm-single,
.tm-footer__inner,
.tm-copy {
width: var(--tm-wrap);
}
.tm-nav {
display: none;
}
.tm-home-grid,
.tm-archive-layout,
.tm-billboard-grid,
.tm-rec-grid,
.tm-video-grid,
.tm-deep-grid,
.tm-footer__inner {
grid-template-columns: 1fr;
gap: 24px;
}
.tm-card-row,
.tm-albums__inner {
grid-template-columns: repeat(2, 1fr);
}
.tm-home-side {
grid-template-columns: repeat(2, 1fr);
}
.tm-rec-main {
grid-template-columns: 1fr;
}
.tm-rec-main .tm-card__image {
width: 100%;
}
.tm-video-list {
grid-template-columns: 1fr;
}
.tm-list-item {
grid-template-columns: 132px minmax(0, 1fr);
gap: 12px;
}
.tm-list-item__image {
width: 132px;
height: 94px;
}
.tm-list-item h2 {
font-size: 17px;
}
.tm-home-main h1 {
font-size: 30px;
}
.tm-home-latest article {
grid-template-columns: minmax(0, 1fr) auto;
}
.tm-excerpt {
display: none;
}
}
@media (max-width: 560px) {
.tm-logo {
font-size: 24px;
}
.tm-rail__inner {
overflow-x: auto;
justify-content: flex-start;
white-space: nowrap;
}
.tm-home-side,
.tm-card-row,
.tm-four-up {
grid-template-columns: 1fr;
}
.tm-list-item,
.tm-rec-item,
.tm-deep-item,
.tm-video-list article {
grid-template-columns: 112px minmax(0, 1fr);
}
.tm-list-item__image {
width: 112px;
height: 82px;
}
.tm-billboard-grid .tm-home-main h1,
.tm-deep-main h3,
.tm-rec-main h3 {
font-size: 24px;
}
}