.md-list {
 margin: 0.5rem 0;
 padding: 0;
 list-style-type: none;
}

.md-list .md-one-line,
.md-list .md-two-line,
.md-list .md-three-line {
 position: relative;
 display: flex;
 box-sizing: border-box;
}

/* container */
.md-list .md-one-line::before,
.md-list .md-two-line::before,
.md-list .md-three-line::before {
 content: "";
 position: absolute;
 z-index: -2;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: var(--md-sys-color-surface);
}

/* state layer */
.md-list .md-one-line::after,
.md-list .md-two-line::after,
.md-list .md-three-line::after {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background-color: transparent;
}

.md-list .md-one-line {
 align-items: center;
 gap: 1rem;
 min-height: 3.5rem;
 padding: 0.5rem 1.5rem 0.5rem 1rem;
}

.md-list .md-one-line.video,
.md-list .md-two-line.video {
 padding: 0.75rem 1.5rem 0.75rem 0;
}

.md-list .md-two-line,
.md-list .md-three-line {
 flex-flow: column;
}

.md-list .md-two-line {
 justify-content: center;
 min-height: 4.5rem;
 padding: 0.5rem 1.5rem 0.5rem 1rem;
}

.md-list .md-two-line.icon,
.md-list .md-two-line.avatar,
.md-list .md-two-line.image,
.md-list .md-two-line.video,
.md-list .md-three-line.icon,
.md-list .md-three-line.avatar,
.md-list .md-three-line.image,
.md-list .md-three-line.video {
 display: grid;
 column-gap: 1rem;
 row-gap: 0;
 grid-template-areas:
  "img headline"
  "img supporting";
}

.md-list .md-two-line.icon,
.md-list .md-two-line.avatar,
.md-list .md-two-line.image,
.md-list .md-two-line.video {
 align-content: center;
 grid-template-rows: 1fr 1fr;
}

.md-list .md-two-line.icon,
.md-list .md-three-line.icon {
 grid-template-columns: var(--iconSize) 1fr;
}

.md-list .md-two-line.avatar,
.md-list .md-three-line.avatar {
 grid-template-columns: var(--avatarSize) 1fr;
}

.md-list .md-two-line.image,
.md-list .md-three-line.image {
 grid-template-columns: var(--imageSize) 1fr;
}

.md-list .md-two-line.video,
.md-list .md-three-line.video {
 grid-template-columns: var(--videoWidth) 1fr;
}

.md-list .md-three-line {
 align-content: flex-start;
 min-height: 5.5rem;
 padding: 0.75rem 1.5rem 0.75rem 1rem;
}

.md-list .md-three-line.video {
 padding: 0.75rem 1.5rem 0.75rem 0;
}

.md-list .md-three-line.icon,
.md-list .md-three-line.avatar,
.md-list .md-three-line.image,
.md-list .md-three-line.video {
 align-content: start;
 grid-template-rows: var(--md-sys-typescale-label-large-line-height) 1fr;
}

/* state layer */
.md-list .md-one-line:hover::after,
.md-list .md-two-line:hover::after,
.md-list .md-three-line:hover::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-hover-state-layer-opacity);
}

/* state layer */
.md-list a.md-one-line:focus::after,
.md-list a.md-two-line:focus::after,
.md-list a.md-three-line:focus::after,
.md-list a.md-one-line:focus-visible::after,
.md-list a.md-two-line:focus-visible::after,
.md-list a.md-three-line:focus-visible::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-focus-state-layer-opacity);
}

.md-list a:focus,
.md-list a:focus-visible {
 outline: none;
}

.md-list a:active {
 background-position: center;
 background-image:
  radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);
 background-size: 100%;
 animation-name: md-ripple;
 animation-duration: var(--md-sys-motion-duration-500);
 box-shadow: var(--md-box_shadow_level0) !important;
}

/* state layer */
.md-list a.md-one-line:active::after,
.md-list a.md-two-line:active::after,
.md-list a.md-three-line:active::after {
 background-color: var(--md-sys-color-on-surface);
 opacity: var(--md-sys-state-pressed-state-layer-opacity);
}

.md-list a.md-two-line,
.md-list a.md-three-line {
 text-decoration: none;
}

.md-list a.md-two-line .headline,
.md-list a.md-three-line .headline {
 text-decoration: underline;
}

.md-list .headline {
 grid-area: headline;
 display: block;
 box-sizing: border-box;
 color: var(--md-sys-color-on-surface);
 font-family: var(--md-sys-typescale-body-large-font);
 font-weight: var(--md-sys-typescale-body-large-weight);
 font-size: var(--md-sys-typescale-body-large-size);
 font-style: var(--md-sys-typescale-body-large-font-style);
 letter-spacing: var(--md-sys-typescale-body-large-tracking);
 line-height: var(--md-sys-typescale-body-large-line-height);
 text-transform: var(--md-sys-typescale-body-large-text-transform);
 text-decoration: var(--md-sys-typescale-body-large-text-decoration);
 max-height: var(--md-sys-typescale-body-large-line-height);
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

.md-list .md-two-line.icon .headline,
.md-list .md-two-line.avatar .headline,
.md-list .md-two-line.image .headline,
.md-list .md-two-line.video .headline,
.md-list .md-three-line.icon .headline,
.md-list .md-three-line.avatar .headline,
.md-list .md-three-line.image .headline,
.md-list .md-three-line.video .headline {
 align-self: end;
}

.md-list .supporting {
 grid-area: supporting;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 overflow: hidden;
 box-sizing: border-box;
 align-self: start;
 font-family: var(--md-sys-typescale-body-medium-font);
 font-weight: var(--md-sys-typescale-body-medium-weight);
 font-size: var(--md-sys-typescale-body-medium-size);
 font-style: var(--md-sys-typescale-body-medium-font-style);
 letter-spacing: var(--md-sys-typescale-body-medium-tracking);
 line-height: var(--md-sys-typescale-body-medium-line-height);
 text-transform: var(--md-sys-typescale-body-medium-text-transform);
 text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
}

.md-list .md-two-line .supporting {
 max-height: var(--md-sys-typescale-body-medium-line-height);
 line-clamp: 1;
 -webkit-line-clamp: 1;
}

.md-list .md-three-line .supporting {
 max-height: calc(2 * var(--md-sys-typescale-body-medium-line-height));
 line-clamp: 2;
 -webkit-line-clamp: 2;
}

.md-list .avatar img,
.md-list .avatar label,
.md-list .avatar .material-symbols-outlined:first-child {
 flex-shrink: 0;
 background-color: var(--md-sys-color-primary-container);
 color: var(--md-sys-color-on-primary-container);
 border-radius: 50%;
 width: var(--avatarSize);
 height: var(--avatarSize);
}

.md-list .avatar label {
 display: inline-block;
 font-family: var(--md-sys-typescale-title-medium-font);
 font-weight: var(--md-sys-typescale-title-medium-weight);
 font-size: var(--md-sys-typescale-title-medium-size);
 font-style: var(--md-sys-typescale-title-medium-font-style);
 letter-spacing: var(--md-sys-typescale-title-medium-tracking);
 line-height: var(--md-sys-typescale-title-medium-line-height);
 text-transform: var(--md-sys-typescale-title-medium-text-transform);
 text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
 overflow: hidden;
}

.md-list .avatar .material-symbols-outlined:first-child {
 font-size: var(--avatarSize);
}

.md-list .avatar.md-two-line img,
.md-list .avatar.md-two-line label,
.md-list .avatar.md-two-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: center;
}

.md-list .avatar.md-three-line img,
.md-list .avatar.md-three-line label,
.md-list .avatar.md-three-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: start;
}

.md-list .icon img,
.md-list .icon .material-symbols-outlined:first-child {
 flex-shrink: 0;
 color: var(--md-sys-color-on-surface-variant);
 width: var(--iconSize);
 height: var(--iconSize);
}

.md-list .icon .material-symbols-outlined:first-child {
 font-size: var(--iconSize);
}

.md-list .icon.md-two-line img,
.md-list .icon.md-two-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: center;
}

.md-list .icon.md-three-line img,
.md-list .icon.md-three-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: start;
}

.md-list .video img {
 flex-shrink: 0;
 color: var(--md-sys-color-on-surface-variant);
 width: var(--videoWidth);
 height: var(--videoHeight);
}

.md-list .video.md-two-line img {
 grid-area: img;
 align-self: center;
}

.md-list .video.md-three-line img {
 grid-area: img;
 align-self: start;
}

.md-list .image img,
.md-list .image .material-symbols-outlined:first-child {
 flex-shrink: 0;
 color: var(--md-sys-color-on-surface-variant);
 width: var(--imageSize);
 height: var(--imageSize);
}

.md-list .image .material-symbols-outlined:first-child {
 font-size: var(--imageSize);
}

.md-list .image.md-two-line img,
.md-list .image.md-two-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: center;
}

.md-list .image.md-three-line img,
.md-list .image.md-three-line .material-symbols-outlined:first-child {
 grid-area: img;
 align-self: start;
}