.tdd-sermon {
  --tdd-max-width: 1080px;
  --tdd-color: #171717;
  --tdd-accent: #171717;
  --tdd-radius: 0px;
  --tdd-title-size: clamp(1.8rem, 4vw, 3.75rem);
  color: var(--tdd-color);
  max-width: var(--tdd-max-width);
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
  font-family: inherit;
}
.tdd-sermon, .tdd-sermon * { box-sizing: border-box; }
.tdd-sermon .tdd-sermon__eyebrow { margin: 0 0 20px; color: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.tdd-sermon .tdd-sermon__title { max-width: 22ch; margin: 0 auto 20px; color: inherit; font-family: inherit; font-size: var(--tdd-title-size); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; text-transform: uppercase; overflow-wrap: anywhere; }
.tdd-sermon .tdd-sermon__subtitle { margin: 0 0 32px; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: inherit; }
.tdd-sermon .tdd-sermon__player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--tdd-radius); background: #111; }
.tdd-sermon .tdd-sermon__play, .tdd-sermon .tdd-sermon__iframe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.tdd-sermon .tdd-sermon__thumbnail { display: block; width: 100%; height: 100%; margin: 0; padding: 0; object-fit: cover; }
.tdd-sermon .tdd-sermon__icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 0; width: clamp(58px, 9vw, 90px); height: clamp(58px, 9vw, 90px); border: 2px solid #fff; border-radius: 50%; background: #111c; color: #fff; font-size: 28px; line-height: 1; transition: background .15s ease; }
.tdd-sermon .tdd-sermon__play:hover .tdd-sermon__icon { background: #111; }
.tdd-sermon .tdd-sermon__play:focus-visible { outline: 4px solid #fff; outline-offset: -6px; }
.tdd-sermon .tdd-sermon__archive { display: inline-block; margin: 28px 0 0; padding: 14px 24px; border: 1px solid currentColor; color: var(--tdd-accent); font-weight: 700; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .tdd-sermon .tdd-sermon__icon { transition: none; } }

.tdd-sermon .tdd-sermon__icon .tdd-sermon__play-svg { display: block; width: 34%; height: 34%; margin: 0; padding: 0; color: #fff; fill: currentColor; pointer-events: none; }