Follow In-Car Entertainment From 1926 to Today

Views: 85

Long earlier than touchscreens, streaming apps, and voice assistants, the automobile was changing into a spot to hear, select, and escape. In-car leisure began with radio, moved by means of tapes and CDs, expanded to rear-seat screens, and in the end remodeled the dashboard right into a linked digital hub. A-Z Eventz celebrates its one hundredth anniversary this 12 months, and we’re wanting again at a century of expertise that has advanced from easy broadcast audio to personalised, software-driven experiences. Yet the purpose has remained the identical: making time on the highway extra pleasing. As A-Z Eventz celebrates its one hundredth anniversary, we glance again at how in-car leisure has advanced from 1926 to at present.

(perform () {
var eras = [
{
year: “1930s-1960s”,
label: “AM Radio”,
desc: “AM radio made the car feel connected to the wider world. News, baseball, serials, and music gave drivers a soundtrack long before playlists existed.”,
image: “https://www.a-zeventz.com/wp-content/uploads/2026/04/Old-car-radio-inside-a-green-classic-American-car-with-chrome-dashboard.jpg”
},
{
year: “1930s-1950s”,
label: “Drive-In Movie Audio”,
desc: “Early automotive entertainment wasn’t always built into the dash. At drive-ins, sound came through a speaker box or radio-based audio, turning the car into part of the entertainment experience.”,
image: “https://dam.coxautoinc.com/asset/c5194829-f683-4d99-8b24-35986ac96e46/OG/Vintage-Cars-Parked-at-a-Drive-In-Movie-Theater-at-Night.jpg”
},
{
year: “1965-1982”,
label: “8-Track Players”,
desc: “8-tracks brought pre-recorded music into the cabin and helped turn the car into a personal listening space. Bulky and imperfect, they were still a big leap toward driver-controlled audio.”,
image: “https://dam.coxautoinc.com/asset/42c60fef-dd23-4a23-8603-046a81663597/OG/Box-of-old-vintage-eight-track-music-tapes.jpg”
},
{
year: “1970s-1990s”,
label: “Cassette Tapes”,
desc: “Cassette decks changed everything. Drivers could buy albums, make mixtapes, and carry their favorite music from home to the highway with far more freedom.”,
image: “https://dam.coxautoinc.com/asset/55def0f8-0e09-4d24-a785-a85474f2c67d/OG/The-driver-inserts-a-cassette-into-a-cassette-recorder-in-an-old-car.jpg”
},
{
year: “1990s-2000s”,
label: “CD Players”,
desc: “CD players sharpened sound quality and gave the dashboard a more modern feel. By the 1990s, the in-car CD player became a status symbol and a road-trip staple.”,
image: “https://dam.coxautoinc.com/asset/53ef47ce-7b46-4172-8999-d1794827d040/OG/close-up-of-dvd-player-with-disk-on-head-unit-audio-car.jpg”
},
{
year: “2000s”,
label: “MP3 Players and iPods”,
desc: “Portable digital music shrank an entire collection into one device. AUX cords and adapters let drivers carry thousands of songs without hauling cases of discs or tapes.”,
image: “https://dam.coxautoinc.com/asset/b2356dcc-86dc-48ce-8fef-e207180f7958/OG/vintage-classic-famous-mp3-player.jpg”
},
{
year: “1990s-2010s”,
label: “In-Car TV and DVD Systems”,
desc: “Rear-seat entertainment made long drives more bearable for families. Flip-down screens and DVD systems turned vans and SUVs into rolling media rooms.”,
image: “https://dam.coxautoinc.com/asset/3ea64a5e-645c-4c5d-a4a5-3f02551a21c7/OG/2021-chrysler-voyager-interior-dvd-screen-jpg.jpg”
},
{
year: “2010s-Today”,
label: “Touchscreens and Streaming”,
desc: “Modern infotainment combines navigation, Bluetooth, apps, podcasts, voice assistants, and streaming audio into one connected hub. Entertainment in the car is now digital, personalized, and always updating.”,
image: “https://dam.coxautoinc.com/asset/ce18bed0-3d56-492c-b438-8c352e0cb1a6/OG/2022-honda-civic-touring-infotainment-jpg.jpg”
}
];

var eraImage = doc.getElementById(“eraImage”);
var eraYear = doc.getElementById(“eraYear”);
var eraLabel = doc.getElementById(“eraLabel”);
var eraDesc = doc.getElementById(“eraDesc”);
var miniDisplay = doc.getElementById(“miniDisplay”);
var displayCard = doc.getElementById(“screenCard”);
var prevBtn = doc.getElementById(“prevBtn”);
var nextBtn = doc.getElementById(“nextBtn”);
var playBtn = doc.getElementById(“playBtn”);
var presetBtns = doc.querySelectorAll(“.preset-btn”);

var presentIndex = 0;
var isAnimating = false;

perform updatePresetButtons(index) {
presetBtns.forEach(perform (btn, i) {
btn.classList.toggle(“is-active”, i === index);
});
}

perform renderCard(index) {
if (isAnimating) return;
isAnimating = true;

displayCard.classList.take away(“is-active”, “flip-in”, “flip-out”);
displayCard.classList.add(“flip-out”);

setTimeout(perform () {
var period = eras[index];
eraImage.src = period.picture;
eraImage.alt = period.label;
eraYear.textContent = period.12 months;
eraLabel.textContent = period.label;
eraDesc.textContent = period.desc;
miniDisplay.textContent = period.12 months + ” | ” + period.label;

displayCard.classList.take away(“flip-out”);
displayCard.classList.add(“flip-in”);

setTimeout(perform () {
displayCard.classList.take away(“flip-in”);
displayCard.classList.add(“is-active”);
updatePresetButtons(index);
isAnimating = false;
}, 110);
}, 320);
}

perform goToIndex(index) {
presentIndex = index;
renderCard(presentIndex);
}

perform subsequentEra() {
presentIndex = (presentIndex + 1) % eras.size;
renderCard(presentIndex);
}

perform prevEra() {
presentIndex = (presentIndex – 1 + eras.size) % eras.size;
renderCard(presentIndex);
}

nextBtn.addEventListener(“click”, subsequentEra);
playBtn.addEventListener(“click”, subsequentEra);
prevBtn.addEventListener(“click”, prevEra);

presetBtns.forEach(perform (btn) {
btn.addEventListener(“click”, perform () {
var index = Number(btn.getAttribute(“data-index”));
goToIndex(index);
});
});
})();

The Car Found Its Voice

Entertainment formally moved into the cabin in 1930, when Motorola launched the primary factory-authorized automobile radios within the Ford Model A. Earlier iterations had been experimental radios, burdened with supplemental batteries and large audio system. Motorola’s smooth (for the time) in-dash unit match with the Model A’s design and performance. Competing automakers quickly started providing radios as elective tools by means of manufacturing unit or dealer-installed techniques. The early techniques had been AM solely and relied on an exterior antenna and analog tuning. Drivers needed to manually alter the dial to cut back static, particularly on long-distance stretches.

Around the identical time, drive-in theaters demonstrated that automobiles might function non-public listening areas in addition to transportation. Though drive-ins first appeared within the 1910s, Richard M. Hollingshead Jr. patented the trendy drive-in on June 6, 1933, and opened his first one in Pennsauken, New Jersey. At first, Hollingshead’s Park-In Theater projected sound from three audio system close to the display. When the patent workplace overturned Hollingshead’s rights to the idea in 1949, drive-in tradition exploded throughout the nation, increasing to greater than 5,000 screens within the Fifties. Individual audio system at every parking house improved sound high quality for the viewers. Eventually, most drive-ins adopted low-power FM transmission, enabling drivers to make use of their in-dash radios to hearken to the soundtrack. Drive-in theaters have ebbed and flowed in reputation since their peak within the Fifties and Nineteen Sixties. Most consultants agree that fewer than 500 screens function within the U.S. at present.

In 1952, Blaupunkt provided an early FM automobile radio, however FM didn’t grow to be broadly fashionable with listeners till the Nineteen Sixties and Nineteen Seventies. FM delivered higher sound high quality, decreased interference, and made music extra immersive with stereo broadcasts.

Drivers Taking Control: Tape Takes Over

By the Nineteen Sixties, drivers wished a bit extra management over what they listened to. In 1965, Ford Motor Company and Motorola helped popularize the 8-track participant, providing it as an possibility on Ford’s 1966 fashions. By the subsequent mannequin 12 months, General Motors and Chrysler provided an 8-track possibility. Bill Lear, founding father of Lear Jet Corporation, led a consortium in creating the expertise, which was initially supposed for dwelling use. An 8-track participant used a steady loop of analog magnetic tape, which meant no rewinding, simply the flexibility to modify tracks. It was handy, however liable to failure on account of mechanical complexity.

The rise of the cassette tape, which Philips pioneered within the early Nineteen Sixties, ultimately eclipsed the 8-track. Cassette decks provided management that 8-tracks didn’t, together with rewind and quick ahead, the flexibility to file your personal music, and the possibility to construct personalised mixtapes. By the Eighties, cassette gamers had grow to be widespread throughout many new autos and aftermarket techniques, turning the automobile right into a deeply private listening setting.

The CD Era

The subsequent main innovation got here within the mid-Eighties. Audio suppliers developed compact-disc expertise for automobiles, and producers rapidly adopted it. Mercedes provided the primary factory-installed in-dash Becker CD unit in 1985, and Lincoln adopted with a manufacturing unit CD possibility within the 1987 Town Car. CDs used optical laser expertise, delivering clear sound, no tape distortion, and instantaneous monitor skipping.

By the Nineteen Nineties, CD gamers gained floor, usually paired with trunk-mounted multi-disc changers, although cassette decks remained widespread for years. For the 2026 mannequin 12 months, solely the Subaru WRX provides a factory-installed CD participant.

Portable Media Takes Over the Dashboard

In the early 2000s, the automobile caught up with the digital world. Automakers started including aux inputs, USB connections, and MP3 compatibility, permitting drivers to attach exterior units.

The launch of the Apple iPod in 2001 accelerated that shift. Suddenly, drivers might carry 1000’s of songs of their pockets and plug instantly into their audio techniques.

This period launched on-demand music choice, digital media libraries, and personalised in-car leisure.

Entertainment for Everyone: Rear Seat Screens

For a long time, automobile leisure targeted on the motive force, however this modified within the late Nineteen Nineties and early 2000s. Vehicles such because the Honda Odyssey and Chrysler Town & Country started providing rear-seat DVD techniques, giving passengers their very own screens.

These techniques used DVDs, which saved video in addition to audio, creating unbiased leisure, family-friendly highway journeys, and a extra managed and quiet cabin expertise.

For the primary time, the automobile thought of everybody, not simply the motive force.

The Connected Car Era

The techniques of at present barely resemble these of the previous. Modern autos depend on software-driven leisure platforms that mix audio, navigation, communication, and apps right into a single interface. In-cabin Wi-Fi permits every passenger to attach a tool (or two or three) creating a private leisure bubble throughout journey.

Systems like Apple CarPlay and Android Auto made smartphone projection important in trendy automobiles. Apple launched CarPlay in March 2014, and Google launched Android Auto in 2015. They mirror your smartphone instantly onto the dashboard. Paired with Bluetooth, Wi-Fi, and mobile connectivity, they permit for streaming music and podcasts immediately, voice-controlled navigation, and personalization primarily based in your habits.

We haven’t even touched on some in-car leisure choices, like Chrysler’s temporary experiment with a vinyl file participant within the Fifties, singing alongside to the songs in your head, or <gasp> dialog together with your passengers. Don’t overlook magnetic chess, the license plate recreation, Punch Bug, I Spy, and different diversions. But we hope this journey down audio and expertise reminiscence lane was informative and entertaining.

What began as a single radio sign has advanced right into a digital ecosystem. Now the automobile not solely performs what you need — it might probably additionally anticipate what you might have considered trying subsequent.

.kbb-entertainment-wrap {
–kbb-blue: #1d3e74;
–kbb-gold: #f3bc2a;
–kbb-deep: #131f2b;
–kbb-cream: #f7f4eb;
–metal-1: #d8d8d8;
–metal-2: #9d9d9d;
–metal-3: #5f5f5f;
–metal-4: #2b2b2b;
–cassette-dark: #202020;
–cassette-mid: #383838;
–cassette-light: #b5a98c;
–glass: rgba(255,255,255,0.08);
–shadow: 0 14px 35px rgba(0,0,0,0.28);

width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 24px;
box-sizing: border-box;
font-family: Figtree, Arial, sans-serif;
colour: #fff;
background:
radial-gradient(circle at high left, rgba(243,188,42,0.18), clear 28%),
radial-gradient(circle at backside proper, rgba(255,255,255,0.07), clear 18%),
linear-gradient(180deg, #264d8f 0%, var(–kbb-blue) 42%, #122844 100%);
border-radius: 24px;
overflow: hidden;
box-shadow: var(–shadow);
}

.kbb-entertainment-titlebar {
text-align: heart;
margin-bottom: 26px;
}

.kbb-entertainment-titlebar h2 {
margin: 10px 0 8px;
font-size: clamp(28px, 4vw, 42px);
line-height: 1.05;
colour: #fff;
letter-spacing: -0.02em;
}

.kbb-entertainment-titlebar p {
margin: 0;
font-size: 15px;
colour: rgba(255,255,255,0.86);
}

.kbb-badge {
show: inline-flex;
align-items: heart;
justify-content: heart;
padding: 8px 16px;
border-radius: 999px;
background: linear-gradient(180deg, #ffd86c 0%, var(–kbb-gold) 100%);
colour: var(–kbb-deep);
font-weight: 700;
font-size: 13px;
box-shadow: 0 8px 18px rgba(0,0,0,0.22);
text-transform: uppercase;
letter-spacing: 0.04em;
}

.retro-unit {
place: relative;
show: flex;
flex-direction: column;
align-items: heart;
hole: 0;
}

.screen-shell {
width: min(760px, 100%);
place: relative;
z-index: 2;
margin-bottom: -12px;
}

.screen-bezel {
background: linear-gradient(180deg, #222 0%, #111 100%);
border-radius: 26px 26px 16px 16px;
padding: 18px;
box-shadow:
inset 0 2px 1px rgba(255,255,255,0.08),
inset 0 -2px 8px rgba(0,0,0,0.6),
0 16px 28px rgba(0,0,0,0.38);
border: 2px strong rgba(255,255,255,0.08);
}

.screen-inner {
place: relative;
min-height: 400px;
border-radius: 16px;
overflow: hidden;
background:
linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)),
#0b0f14;
border: 2px strong rgba(243,188,42,0.24);
box-shadow:
inset 0 0 0 2px rgba(255,255,255,0.02),
inset 0 0 30px rgba(0,0,0,0.75);
}

.screen-card {
place: relative;
width: 100%;
min-height: 400px;
show: grid;
grid-template-columns: 1.25fr 0.95fr;
background:
linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0)),
linear-gradient(180deg, #09111d, #13253f);
transform-style: preserve-3d;
transition: remodel 0.65s ease, opacity 0.65s ease;
}

.screen-card.flip-out {
remodel: rotateY(90deg);
opacity: 0.15;
}

.screen-card.flip-in {
remodel: rotateY(-90deg);
opacity: 0.15;
}

.screen-card.is-active {
remodel: rotateY(0deg);
opacity: 1;
}

.screen-image-wrap {
place: relative;
min-height: 400px;
overflow: hidden;
background: #0c1727;
}

.screen-image-wrap img {
width: 100%;
top: 100%;
min-height: 400px;
show: block;
object-fit: cowl;
filter: saturate(1.02) distinction(1.04);
}

.screen-image-wrap::after {
content material: “”;
place: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.35)),
repeating-linear-gradient(
to backside,
rgba(255,255,255,0.03) 0px,
rgba(255,255,255,0.03) 1px,
clear 2px,
clear 4px
);
pointer-events: none;
}

.screen-static {
place: absolute;
inset: 0;
background:
radial-gradient(circle, rgba(255,255,255,0.05) 1px, clear 1.5px);
background-size: 8px 8px;
opacity: 0.08;
mix-blend-mode: display;
pointer-events: none;
}

.screen-year {
place: absolute;
high: 18px;
left: 18px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(19,31,43,0.78);
border: 1px strong rgba(243,188,42,0.45);
colour: #fff;
font-size: 13px;
font-weight: 700;
backdrop-filter: blur(6px);
z-index: 2;
}

.screen-copy {
show: flex;
flex-direction: column;
justify-content: heart;
padding: 28px 26px;
background:
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
linear-gradient(180deg, rgba(243,188,42,0.05), rgba(255,255,255,0));
}

.screen-label {
font-size: clamp(24px, 3vw, 34px);
line-height: 1.05;
font-weight: 800;
margin-bottom: 14px;
colour: #fff;
letter-spacing: -0.03em;
}

.screen-copy p {
margin: 0;
colour: rgba(255,255,255,0.9);
font-size: 16px;
line-height: 1.55;
}

.screen-shadow {
width: 90%;
top: 18px;
margin: 0 auto;
background: radial-gradient(circle, rgba(0,0,0,0.45), clear 68%);
filter: blur(10px);
}

.deck-shell {
width: min(820px, 100%);
background:
linear-gradient(180deg, #8f8f8f 0%, #c8c8c8 12%, #909090 32%, #5f5f5f 68%, #2e2e2e 100%);
border-radius: 22px;
padding: 14px 14px 12px;
box-shadow:
inset 0 2px 1px rgba(255,255,255,0.35),
inset 0 -4px 8px rgba(0,0,0,0.45),
0 18px 30px rgba(0,0,0,0.38);
border: 2px strong rgba(255,255,255,0.18);
place: relative;
z-index: 1;
}

.deck-top-ridge {
width: 100%;
top: 8px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255,255,255,0.2), rgba(0,0,0,0.22), rgba(255,255,255,0.18));
margin-bottom: 10px;
}

.deck-header {
show: flex;
justify-content: space-between;
align-items: heart;
hole: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}

.deck-brand {
colour: #101010;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.deck-mini-display {
show: flex;
align-items: heart;
hole: 8px;
min-height: 30px;
padding: 6px 10px;
border-radius: 8px;
background:
linear-gradient(180deg, #2d3819 0%, #11180a 100%);
border: 1px strong rgba(0,0,0,0.45);
box-shadow: inset 0 0 8px rgba(185,255,95,0.15);
}

.mini-dot {
width: 8px;
top: 8px;
border-radius: 50%;
background: #b8ff5f;
box-shadow: 0 0 8px rgba(184,255,95,0.7);
flex-shrink: 0;
}

.mini-text {
colour: #d7efb8;
font-family: “Courier New”, monospace;
font-size: 12px;
white-space: nowrap;
}

.deck-body {
show: grid;
grid-template-columns: 145px 1fr 145px;
hole: 12px;
align-items: stretch;
}

.speaker {
background:
linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.22)),
linear-gradient(180deg, #454545 0%, #232323 100%);
border-radius: 14px;
padding: 10px;
border: 1px strong rgba(255,255,255,0.08);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.08),
inset 0 -3px 8px rgba(0,0,0,0.4);
show: flex;
align-items: heart;
justify-content: heart;
}

.speaker-ring {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 50%;
padding: 10px;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), clear 35%),
linear-gradient(180deg, #1a1a1a 0%, #080808 100%);
box-shadow:
inset 0 2px 4px rgba(255,255,255,0.06),
inset 0 -6px 10px rgba(0,0,0,0.65);
show: flex;
align-items: heart;
justify-content: heart;
}

.speaker-grid {
width: 100%;
top: 100%;
border-radius: 50%;
background:
radial-gradient(circle, rgba(255,255,255,0.06) 1px, clear 1.5px);
background-size: 9px 9px;
box-shadow: inset 0 0 22px rgba(0,0,0,0.7);
}

.outer-knob {
width: 100%;
top: 100%;
border-radius: 50%;
border: 2px strong rgba(255,255,255,0.14);
background:
radial-gradient(circle at 32% 25%, rgba(255,255,255,0.20), clear 30%),
linear-gradient(180deg, #2f2f2f 0%, #0f0f0f 100%);
box-shadow:
inset 0 2px 3px rgba(255,255,255,0.10),
inset 0 -6px 10px rgba(0,0,0,0.62),
0 6px 12px rgba(0,0,0,0.35);
colour: #f2f2f2;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.09em;
cursor: default;
font-family: inherit;
}

.outer-knob:focus {
define: 2px strong rgba(243,188,42,0.65);
outline-offset: 2px;
}

.cassette-center {
background:
linear-gradient(180deg, rgba(255,255,255,0.15), rgba(0,0,0,0.16)),
linear-gradient(180deg, #767676 0%, #434343 100%);
border-radius: 14px;
padding: 12px;
border: 1px strong rgba(255,255,255,0.12);
box-shadow:
inset 0 2px 2px rgba(255,255,255,0.16),
inset 0 -4px 8px rgba(0,0,0,0.38);
}

.cassette-window {
place: relative;
background:
linear-gradient(180deg, #171717 0%, #2a2a2a 100%);
border-radius: 12px;
padding: 10px;
border: 2px strong rgba(0,0,0,0.45);
box-shadow:
inset 0 3px 6px rgba(255,255,255,0.04),
inset 0 -6px 8px rgba(0,0,0,0.5);
margin-bottom: 10px;
}

.cassette-tape {
place: relative;
top: 110px;
border-radius: 8px;
background:
linear-gradient(180deg, #2d2d2d 0%, #1c1c1c 100%);
border: 2px strong rgba(255,255,255,0.04);
overflow: hidden;
}

.cassette-label-strip {
place: absolute;
left: 18px;
proper: 18px;
high: 12px;
top: 22px;
border-radius: 6px;
background:
linear-gradient(90deg, #d4c6a4 0%, #b7aa8d 100%);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.35);
}

.cassette-reel {
place: absolute;
backside: 22px;
width: 56px;
top: 56px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), clear 28%),
linear-gradient(180deg, #0e0e0e 0%, #2e2e2e 100%);
border: 2px strong rgba(255,255,255,0.07);
show: flex;
align-items: heart;
justify-content: heart;
animation: spinReel 4.4s linear infinite;
}

.reel-left { left: 54px; }
.reel-right { proper: 54px; }

.reel-core {
width: 18px;
top: 18px;
border-radius: 50%;
background: #9d9d9d;
box-shadow: 0 0 0 7px rgba(0,0,0,0.38);
}

@keyframes spinReel {
from { remodel: rotate(0deg); }
to { remodel: rotate(360deg); }
}

.cassette-bottom-slots {
place: absolute;
backside: 8px;
left: 18px;
proper: 18px;
show: flex;
justify-content: space-between;
}

.cassette-bottom-slots span {
width: 64px;
top: 6px;
border-radius: 4px;
background: rgba(0,0,0,0.48);
}

.transport-row {
show: flex;
justify-content: heart;
hole: 8px;
margin-bottom: 10px;
}

.transport-btn,
.preset-btn {
look: none;
border: none;
cursor: pointer;
font-family: inherit;
transition: remodel 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.transport-btn {
min-width: 50px;
top: 40px;
border-radius: 999px;
font-weight: 800;
font-size: 15px;
colour: #111;
background:
linear-gradient(180deg, #ffd86a 0%, var(–kbb-gold) 100%);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.55),
0 4px 0 #7d6112,
0 8px 14px rgba(0,0,0,0.22);
}

.transport-btn.small {
background:
linear-gradient(180deg, #3f3f3f 0%, #171717 100%);
colour: #f7f7f7;
letter-spacing: 0.06em;
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.16),
0 4px 0 #0b0b0b,
0 8px 14px rgba(0,0,0,0.22);
}

.transport-btn:hover,
.preset-btn:hover {
remodel: translateY(1px);
}

.transport-btn:lively,
.preset-btn:lively {
remodel: translateY(3px);
box-shadow: none;
}

.preset-row {
show: grid;
grid-template-columns: repeat(8, 1fr);
hole: 6px;
}

.preset-btn {
top: 34px;
border-radius: 999px;
font-weight: 800;
font-size: 13px;
colour: #111;
background:
linear-gradient(180deg, #ececec 0%, #a9a9a9 100%);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.5),
0 4px 0 #656565,
0 8px 12px rgba(0,0,0,0.18);
}

.preset-btn.is-active {
background:
linear-gradient(180deg, #ffd86a 0%, var(–kbb-gold) 100%);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.55),
0 4px 0 #7d6112,
0 8px 12px rgba(0,0,0,0.18);
}

@media (max-width: 860px) {
.screen-card {
grid-template-columns: 1fr;
}

.screen-image-wrap,
.screen-image-wrap img {
min-height: 280px;
}

.deck-body {
grid-template-columns: 1fr;
}

.speaker {
show: none;
}

.screen-inner,
.screen-card {
min-height: auto;
}
}

@media (max-width: 560px) {
.kbb-entertainment-wrap {
padding: 18px;
border-radius: 18px;
}

.screen-copy {
padding: 22px 18px;
}

.preset-row {
grid-template-columns: repeat(4, 1fr);
}

.mini-text {
white-space: regular;
line-height: 1.2;
}
}

Source link

#Follow #InCar #Entertainment #Today