.ryt { clear: both; padding: 40px 16px; background: #f6f7f9; color: #1d1d1f; font-size: 16px; line-height: 1.45; }
.ryt--product { background: transparent; padding: 32px 0 8px; }
.ryt__in { max-width: 1180px; margin: 0 auto; }
.ryt__h { margin: 0 0 6px; font-size: 26px; line-height: 1.2; font-weight: 700; color: inherit; text-transform: none; letter-spacing: 0; }
.ryt--product .ryt__h { font-size: 22px; }
.ryt__lede { margin: 0 0 20px; color: #555; }
.ryt--product .ryt__h + .ryt__grid { margin-top: 16px; }
.ryt__grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ryt__grid--1 { grid-template-columns: minmax(0, 820px); }
.ryt__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ryt__card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.ryt__media { position: relative; aspect-ratio: 16 / 9; background: #000; }
.ryt__media iframe, .ryt__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ryt__play { padding: 0; margin: 0; cursor: pointer; background: #000; display: block; }
.ryt__play img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.ryt__btn { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 14px; background: rgba(33, 33, 33, .8); transition: background .15s; }
.ryt__btn::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.ryt__play:hover .ryt__btn, .ryt__play:focus-visible .ryt__btn { background: #f00; }
.ryt__title { display: block; padding: 12px 14px 14px; color: #1d1d1f !important; font-weight: 600; text-decoration: none !important; }
.ryt__title:hover { color: #c00 !important; }
.ryt__all, .ryt-foot { display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; }
.ryt__all { margin-top: 22px; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid #ddd; color: #1d1d1f !important; font-weight: 600; }
.ryt__all:hover { border-color: #f00; }
.ryt-foot-line { clear: both; text-align: center; padding: 10px 16px; }
.ryt-foot-line--page { background: #f6f7f9; }
.ryt-foot { color: inherit !important; font-weight: 600; font-size: 15px; }
.ryt-foot:hover span { text-decoration: underline; }
.ryt svg, .ryt-foot svg { flex: none; }
@media (max-width: 760px) {
  .ryt__grid, .ryt__grid--2 { grid-template-columns: minmax(0, 1fr); }
  .ryt__h { font-size: 22px; }
}
