.homepage-redesign {
  background: #f6ead5;
}

@media (max-width: 640px) {
  body.homepage-redesign.has-mobile-quickbar {
    padding-bottom: 0;
  }

  .homepage-redesign.has-mobile-quickbar .footer-premium {
    padding-bottom: calc(18px + 78px + env(safe-area-inset-bottom));
  }
}

.homepage-redesign .redesign-paper {
  min-height: 150vh;
  padding: 64px 0 0;
  background-color: #f6ead5;
  background-image:
    linear-gradient(rgba(255, 248, 234, 0.38), rgba(255, 248, 234, 0.38)),
    url("/assets/images/homepage-redesign/retro-paper.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.redesign-latest {
  margin-top: -28px;
  margin-bottom: -12px;
}

.homepage-redesign .redesign-latest-eyebrow {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: 0;
  color: #655845;
}

.redesign-latest-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 12px;
}

.redesign-latest-heading h2 {
  margin: 2px 0 4px;
  font-family: Georgia, serif;
  font-size: 36px;
  line-height: 1.15;
  color: #241d16;
}

.redesign-latest-intro {
  margin: 0;
  color: #655845;
  font-size: 14px;
  line-height: 1.5;
}

.redesign-latest-all {
  flex-shrink: 0;
  padding: 9px 16px;
  border: 1px solid #857663;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #30271d;
  background: rgba(255, 248, 234, 0.65);
  text-decoration: none;
  white-space: nowrap;
}

.redesign-latest-grid {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 27.5fr) minmax(0, 27.5fr);
  gap: 8px;
}

.redesign-latest-card {
  position: relative;
  display: block;
  height: 300px;
  overflow: hidden;
  border: 1px solid #d1c2a8;
  border-radius: 5px;
  background: #231d18;
  color: #fff;
}

.redesign-latest-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.redesign-latest-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 25%, rgba(10, 8, 6, 0.5) 56%, rgba(10, 8, 6, 0.96));
  pointer-events: none;
}

.redesign-latest-copy {
  position: absolute;
  z-index: 1;
  inset: auto 16px 14px;
}

.redesign-latest-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  background: #bd1820;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.redesign-latest-copy h3 {
  margin: 4px 0 0;
  font-family: Georgia, serif;
  font-size: 24px;
  line-height: 1.12;
  color: #fff;
  overflow-wrap: anywhere;
}

.redesign-latest-card:first-child .redesign-latest-copy h3 {
  font-size: 29px;
}

.redesign-latest-song {
  margin: 3px 0 8px;
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.25;
  color: #fff;
  overflow-wrap: anywhere;
}

.redesign-latest-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.redesign-latest-year {
  font-size: 14px;
  color: #f5ead5;
}

.redesign-latest-cta {
  padding: 7px 10px;
  border: 1px solid #c6a770;
  border-radius: 6px;
  background: rgba(100, 75, 38, 0.7);
  font-size: 10px;
  font-weight: 700;
  color: #fff2d6;
  white-space: nowrap;
}

.redesign-latest-card:first-child .redesign-latest-cta {
  background: #ffe4ad;
  color: #352819;
}

.redesign-latest-card:hover .redesign-latest-cta,
.redesign-latest-all:hover {
  background: #ffe4ad;
  color: #352819;
}

.redesign-latest-card:focus-visible,
.redesign-latest-all:focus-visible {
  outline: 3px solid #17665e;
  outline-offset: 4px;
}

.redesign-classics {
  padding-block: 32px;
}

.redesign-classics-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 14px;
}

.redesign-classics-heading h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1.15;
  color: #241d16;
}

.redesign-classics-all {
  flex-shrink: 0;
  padding: 9px 16px;
  border: 1px solid #857663;
  border-radius: 4px;
  background: rgba(255, 248, 234, 0.65);
  font-size: 11px;
  font-weight: 700;
  color: #30271d;
  text-decoration: none;
  white-space: nowrap;
}

.redesign-classics-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.redesign-classics-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #f0e3cd;
  box-shadow: inset 0 0 0 1px #b59a7140, 0 2px 6px #59402312;
  color: #241d16;
  text-decoration: none;
}

.redesign-classics-artwork {
  position: relative;
  height: 164px;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  background: #211b16;
}

.redesign-classics-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.redesign-classics-play {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding-left: 2px;
  border: 2px solid #fff9eb;
  border-radius: 50%;
  background: #0006;
  font-size: 16px;
  color: #fff9eb;
}

.redesign-classics-copy {
  padding: 10px 12px 12px;
}

.redesign-classics-copy h3 {
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  color: inherit;
  overflow-wrap: anywhere;
}

.redesign-classics-copy p {
  margin: 0 0 3px;
  font-size: 13px;
  line-height: 1.3;
  color: inherit;
  overflow-wrap: anywhere;
}

.redesign-classics-copy small {
  font-size: 11px;
  color: #655845;
}

.redesign-classics-featured {
  height: 248px;
  overflow: hidden;
  border-radius: 4px;
  color: #fff;
}

.redesign-classics-featured .redesign-classics-artwork {
  height: 100%;
}

.redesign-classics-featured .redesign-classics-artwork::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 35%, #000c);
  pointer-events: none;
}

.redesign-classics-featured .redesign-classics-play {
  z-index: 1;
  top: 40%;
  bottom: auto;
  right: 40%;
  width: 48px;
  height: 48px;
}

.redesign-classics-featured .redesign-classics-copy {
  position: absolute;
  inset: auto 14px 12px;
  padding: 0;
}

.redesign-classics-featured .redesign-classics-copy h3 {
  font-size: 18px;
}

.redesign-classics-featured .redesign-classics-copy small {
  color: #eadfc8;
}

.redesign-classics-card:hover .redesign-classics-play {
  background: #a47f37cc;
}

.redesign-classics-card:focus-visible,
.redesign-classics-all:focus-visible {
  outline: 3px solid #17665e;
  outline-offset: 4px;
}

@media (min-width: 1001px) {
  .redesign-classics-card {
    align-self: stretch;
  }
  .redesign-classics-featured {
    height: auto;
    min-height: 248px;
  }
  .redesign-classics-featured .redesign-classics-artwork {
    position: absolute;
    inset: 0;
  }
  .redesign-classics-card:not(.redesign-classics-featured) {
    display: flex;
    flex-direction: column;
  }
  .redesign-classics-card:not(.redesign-classics-featured) .redesign-classics-artwork {
    flex-shrink: 0;
  }
  .redesign-classics-card:not(.redesign-classics-featured) .redesign-classics-copy {
    display: flex;
    flex-direction: column;
  }
  .redesign-classics-card:not(.redesign-classics-featured) .redesign-classics-copy small {
    margin-top: 6px;
  }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .redesign-classics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .redesign-classics-featured {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .redesign-classics-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .redesign-classics-heading h2 { font-size: 28px; }
  .redesign-classics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }
  .redesign-classics-featured { grid-column: 1 / -1; }
  .redesign-classics-artwork { height: 156px; }
}

.redesign-decades {
  padding-block: 20px 24px;
  background: #15120f;
  color: #fff4df;
}

.redesign-decades h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1.15;
  color: #fff4df;
}

.redesign-decades-intro {
  margin: 3px 0 12px;
  font-size: 13px;
  color: #e7d7b6;
}

.redesign-decades-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.redesign-decade {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  aspect-ratio: 7 / 8;
  overflow: hidden;
  border: 1px solid #ad9567;
  border-radius: 4px;
  background-image: url("assets/images/homepage-redesign/decade-scenes.png");
  background-size: 400% auto;
  background-repeat: no-repeat;
  color: #fff4df;
  text-decoration: none;
}

.redesign-decade-50 { background-position: 0% center; }
.redesign-decade-70 { background-position: 33.333333% center; }
.redesign-decade-80 { background-position: 66.666667% center; }
.redesign-decade-90 { background-position: 100% center; }

.redesign-decade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 30%, #0008 58%, #000d);
  pointer-events: none;
}

.redesign-decade-copy {
  position: relative;
  padding: 14px 16px;
}

.redesign-decade h3 {
  margin: 0 0 5px;
  font-family: Georgia, serif;
  font-size: 29px;
  line-height: 1.1;
  color: #fff4df;
}

.redesign-decade p {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.3;
  color: #f3e5c9;
}

.redesign-decade-cta {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #c4ac7d;
  border-radius: 16px;
  background: #17130ee6;
  font-size: 9px;
  font-weight: 700;
  color: #fff1d3;
}

.redesign-decade:focus-visible {
  outline: 3px solid #e6ca8e;
  outline-offset: 3px;
}

@media (max-width: 1000px) {
  .redesign-decades-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .redesign-decades h2 { font-size: 28px; }
  .redesign-decades-grid { grid-template-columns: minmax(0, 1fr); }
}

.redesign-legends {
  padding-block: 20px 18px;
  background: linear-gradient(#fff4de80, #f3e3c880), url("assets/images/homepage-redesign/retro-paper.png") center / cover no-repeat;
  color: #241d16;
}

.redesign-legends-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}

.redesign-legends-heading h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: #241d16;
}

.redesign-legends-heading p {
  margin: 3px 0 0;
  font-size: 13px;
  color: #65523d;
}

.redesign-legends-all {
  flex-shrink: 0;
  padding: 9px 16px;
  border: 1px solid #857663;
  border-radius: 4px;
  background: #fff8ea80;
  font-size: 10px;
  font-weight: 700;
  color: #30271d;
  text-decoration: none;
  white-space: nowrap;
}

.redesign-legends-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 18px;
}

.redesign-legend {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: #241d16;
}

.redesign-legend-portrait {
  display: block;
  width: min(100%, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: url("assets/images/homepage-redesign/legend-portraits.png");
  background-size: 1171.428571% auto;
  background-repeat: no-repeat;
}

.redesign-legend-elvis { background-position: 6.266667% 67.924528%; }
.redesign-legend-abba { background-position: 18.266667% 67.924528%; }
.redesign-legend-queen { background-position: 30.266667% 67.924528%; }
.redesign-legend-beatles { background-position: 42.8% 67.924528%; }
.redesign-legend-tina { background-position: 55.6% 67.924528%; }
.redesign-legend-dire { background-position: 68.266667% 67.924528%; }
.redesign-legend-chris { background-position: 80.8% 67.924528%; }
.redesign-legend-stones { background-position: 93.2% 67.924528%; }

.redesign-legend:focus-visible,
.redesign-legends-all:focus-visible {
  outline: 3px solid #17665e;
  outline-offset: 4px;
}

@media (max-width: 1000px) {
  .redesign-legends-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .redesign-legends-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .redesign-legends-heading h2 { font-size: 28px; }
  .redesign-legends-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.redesign-facts {
  background: linear-gradient(#100d0bf5, #100d0bf5), url("assets/images/homepage-redesign/retro-paper.png") center / cover no-repeat;
  color: #fff3d7;
}

.homepage-redesign .footer-premium {
  border-top: 0;
  box-shadow: none;
}

.redesign-facts-inner {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 82px;
  align-items: center;
  gap: 18px;
  min-height: 114px;
  padding-block: 14px;
}

.redesign-facts-icon {
  font-size: 36px;
  color: #e6c77b;
  text-align: center;
}

.redesign-facts-copy { min-width: 0; }

.redesign-facts h2 {
  margin: 0 0 6px;
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: #e6c77b;
}

.redesign-facts-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: #fff4e3;
  overflow-wrap: anywhere;
}

.redesign-facts-images {
  display: flex;
  align-items: center;
  height: 86px;
  min-width: 0;
}

.redesign-facts-cover {
  position: relative;
  z-index: 1;
  width: 82px;
  height: 82px;
  object-fit: cover;
  border: 1px solid #b28e55;
  border-radius: 2px;
}

.redesign-facts-images:focus-visible {
  outline: 2px solid #f3d698;
  outline-offset: 3px;
}

@media (max-width: 1000px) {
  .redesign-facts-inner { grid-template-columns: 36px minmax(0, 1fr) 82px; column-gap: 12px; }
}

@media (max-width: 760px) {
  .redesign-facts-inner { grid-template-columns: 32px minmax(0, 1fr); padding-block: 18px; row-gap: 12px; }
  .redesign-facts-icon { font-size: 30px; align-self: start; }
  .redesign-facts-copy { grid-column: 2; }
  .redesign-facts h2 { font-size: 18px; }
  .redesign-facts-images { grid-column: 2; }
}

.redesign-radio {
  margin-top: 48px;
  width: 100%;
  overflow: hidden;
  border-block: 1px solid #68513a;
  background:
    radial-gradient(ellipse at 3% 30%, #49201955, transparent 35%),
    repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 4px),
    linear-gradient(100deg, #100e0c, #251b14 50%, #080808);
  color: #fff0d9;
}

.redesign-radio-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.7fr) minmax(0, 0.75fr);
  align-items: center;
  gap: 24px;
  min-height: 270px;
  padding-block: 24px;
}

.redesign-radio-intro {
  position: relative;
  z-index: 1;
}

.redesign-radio-intro h2 {
  margin: 0 0 16px;
  padding-left: 8px;
  font-family: "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive;
  font-size: 64px;
  font-weight: 400;
  font-style: italic;
  line-height: 0.8;
  color: #fff1e6;
  transform: rotate(-9deg);
  text-shadow: 0 0 2px #fff, 0 0 5px #ff3028, 0 0 12px #ff3028, 0 0 26px #e80f0f;
}

.redesign-radio-intro p {
  margin: 24px 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.65;
  color: #e6d6bb;
}

.redesign-radio-receiver {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
  align-items: center;
  gap: 14px;
  padding: 20px;
  border: 2px solid #8f633c;
  border-radius: 16px 16px 8px 8px;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, #a26c3920 3px 4px, transparent 4px 8px),
    linear-gradient(110deg, #24150d, #463020 46%, #1e130d);
  box-shadow: inset 0 0 0 3px #17100b, inset 0 0 0 5px #a0814e80, 0 8px 22px #000b;
}

.redesign-radio-cover-slot {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid #b69b70;
  border-radius: 3px;
  background: #171411;
  box-shadow: 0 0 0 4px #17130f, 0 0 0 5px #8d754d;
}

.redesign-radio-cover-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.redesign-radio-cover-slot img[hidden] { display: none; }

.redesign-radio-player {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 12px;
}

.redesign-radio-now { min-width: 0; }

.redesign-radio-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 7px;
  border-radius: 2px;
  background: #b71822;
  color: #fff0df;
  font-size: 9px;
  font-weight: 700;
}

.redesign-radio-player h3 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.2;
  color: #fff1db;
  overflow-wrap: anywhere;
}

.redesign-radio-song {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.3;
  color: #fff1db;
  overflow-wrap: anywhere;
}

.redesign-radio-year {
  margin: 0;
  min-height: 16px;
  font-size: 12px;
  color: #cfb994;
}

.redesign-radio-dial {
  position: relative;
  align-self: stretch;
  min-height: 84px;
  padding: 15px 10px 8px;
  overflow: hidden;
  border: 1px solid #96703d;
  border-radius: 8px;
  background: linear-gradient(#080705, #291a09 65%, #070605);
  box-shadow: inset 0 0 0 4px #090805, inset 0 0 16px #000, 0 0 0 3px #130f0a;
  color: #d29b48;
}

.redesign-radio-frequency {
  display: flex;
  justify-content: space-between;
  gap: 3px;
  font-size: 8px;
  white-space: nowrap;
}

.redesign-radio-spectrum {
  display: block;
  width: 100%;
  height: 64px;
  margin-top: 4px;
}

.redesign-radio-dial small {
  display: block;
  margin-top: 6px;
  font-size: 7px;
}

.redesign-radio-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.redesign-radio-controls button {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #a18459;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #453a2a, #15120e 70%);
  box-shadow: 0 2px 4px #0008, inset 0 0 0 3px #16120d;
  color: #f9e5c1;
  cursor: pointer;
}

.redesign-radio-controls .redesign-radio-play {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
  border-color: #ffb8a2;
  background: linear-gradient(#ff3441, #bb0e1a);
  box-shadow: 0 0 10px #ff1c2940, inset 0 0 0 3px #d7212c;
  color: #fff3df;
}

.redesign-radio-controls button:focus-visible,
.redesign-radio-volume input:focus-visible {
  outline: 2px solid #ffe7b7;
  outline-offset: 3px;
}

.redesign-radio-controls button:hover { filter: brightness(1.15); }

.redesign-radio-volume {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #e3c995;
  font-size: 14px;
}

.redesign-radio-volume input {
  width: 100%;
  min-width: 0;
  accent-color: #dfba78;
}

.redesign-radio-controls::after {
  content: "";
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid #ad8954;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #a58250, #332319 46%, #15100b 65%, #b08954 70%, #17110c 75%);
}

.redesign-radio-time {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 10px;
  color: #c4ae8b;
}

.redesign-radio-record {
  display: grid;
  place-items: center;
  width: 240px;
  aspect-ratio: 1;
  border: 3px solid #080808;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #101010 0 2px, #292724 3px, #111 4px 6px);
  box-shadow: 4px 8px 14px #0009;
  transform: rotate(-18deg);
}

.redesign-radio-record img {
  width: 46%;
  height: auto;
  border-radius: 50%;
  background: #d8af68;
}

.redesign-radio-player audio { max-width: 100%; }

@media (min-width: 761px) and (max-width: 1100px) {
  .redesign-radio-inner {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 2.7fr);
    gap: 20px;
  }
  .redesign-radio-record { display: none; }
  .redesign-radio-intro h2 { font-size: 52px; }
}

@media (max-width: 760px) {
  .redesign-latest {
    margin-top: -12px;
    margin-bottom: -8px;
  }

  .homepage-redesign .redesign-paper {
    padding: 40px 0 0;
  }

  .redesign-latest-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .redesign-latest-heading h2 {
    font-size: 30px;
  }

  .redesign-latest-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .redesign-radio-inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 18px;
    gap: 24px;
  }

  .redesign-radio-intro h2 {
    font-size: 46px;
  }

  .redesign-radio-intro h2 br { display: none; }

  .redesign-radio-intro p { margin-top: 12px; }

  .redesign-radio-receiver {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
    gap: 20px;
  }

  .redesign-radio-cover-slot {
    width: min(100%, 260px);
    margin-inline: auto;
  }

  .redesign-radio-player {
    grid-template-columns: minmax(0, 1fr);
  }

  .redesign-radio-dial { min-height: 84px; }

  .redesign-radio-record { display: none; }
}

@media (max-width: 400px) {
  .redesign-radio-controls {
    flex-wrap: wrap;
  }

  .redesign-radio-volume {
    flex: 1 0 100%;
    order: 1;
  }

  .redesign-radio-volume input {
    min-height: 44px;
  }
}