/* Soundtrack */

.layout-soundtrack {
    audio {
        width: 100%;
        min-width: 200px;
        max-width: 300px;
    }

    /* The icons take the color of the text around them */
    .icon {
        display: inline-block;
        width: 1em;
        height: 1em;
        background: currentColor;
        vertical-align: -.125em;
        mask: var(--icon) center / contain no-repeat;
    }

    .icon-download { --icon: url("../../images/icons/download.svg"); }
    .icon-globe { --icon: url("../../images/icons/globe.svg"); }

    /* The player doesn't fit next to the other columns on a phone, so it gets its own line */
    @media (max-width: 767px) {
        .table {
            display: block;

            thead {
                display: none;
            }

            tbody {
                display: block;
            }

            tr {
                display: grid;
                grid-template-columns: fit-content(35%) 1fr auto auto;
                column-gap: 12px;
                align-items: baseline;
                padding: 8px 0;
                border-top: 1px solid var(--color-line);
            }

            td {
                display: block;
                padding: 2px 0;
                border: 0;
                overflow-wrap: anywhere;

                &:nth-child(4) {
                    grid-row: 2;
                    grid-column: 1 / -1;
                }
            }

            audio {
                max-width: none;
            }
        }
    }
}