* { box-sizing: border-box; }
.site-shell { width: 753px; max-width: calc(100% - 16px); margin-inline: auto; }
.site-banner { display: block; width: 100%; height: auto; }
.home-layout { width: 100%; }
img { max-width: 100%; }
.home-content img[src="images/pix.gif"] { height: 1px; }
.mix-detail { max-width: 100%; }

@media (max-width: 760px) {
 body { margin: 0; }
 .site-shell { table-layout: fixed; }
 .site-shell td { overflow-wrap: anywhere; }
 .home-layout { display: block; }
 .home-layout > tbody { display: block; }
 .home-layout > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
 .home-layout > tbody > tr > td { display: block; min-width: 0; }
 .home-layout .home-content { grid-column: 1 / -1; grid-row: 1; padding: 0 8px; }
 .home-layout .home-spacer { display: none; }
 .leftrightmix { padding-inline: 6px; }
 .leftrightmix > table { width: 100%; }
 .leftrightmix img { height: auto; }
 .home-content > table { width: 100%; }
 .home-content iframe { width: 100% !important; max-width: 100%; }
 .home-content p { line-height: 1.8; }
 .home-content form { line-height: 1.8; padding-block: 4px; }
 .home-content input[type="text"] { display: block; width: 100%; max-width: 100%; min-height: 36px; margin: 6px 0; font: inherit; }
 .home-content input[type="image"] { box-sizing: content-box; padding: 8px; }
 .site-shell > tbody > tr:last-child > td { padding: 8px 4px; line-height: 1.7; }
}

@media (max-width: 660px) {
 .mix-catalog { display: block; width: 100%; padding: 0 10px; border-spacing: 0; text-align: left; }
 .mix-catalog > tbody { display: block; }
 .mix-catalog tr { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; margin-bottom: 16px; }
 .mix-catalog td { display: block; width: auto; min-width: 0; align-self: center; line-height: 1.6; }
 .mix-catalog td:nth-child(even) > b:first-child > a { display: inline-block; padding-block: 4px; }
 .mix-catalog img { display: block; width: 75px; height: 75px; }
 .mix-detail { width: 95%; }
 .mix-detail h1 { font-size: 18px; line-height: 1.4; }
 .mix-tracks { display: block; width: 100%; padding: 0 10px; }
 .mix-tracks > tbody { display: flex; flex-direction: column; }
 .mix-tracks > tbody > tr { display: contents; }
 .mix-tracks td { display: block; min-width: 0; line-height: 1.65; }
 .mix-tracks .mix-cover { order: -1; padding: 0 0 16px; }
 .mix-cover img { display: block; margin: auto; width: 175px; height: 175px; }
}
