@charset "utf-8";

.media { margin: 0px auto; position: relative; padding: var(--spacing-s) 0; }

.dark .media, .media.dark { color: rgb(255, 255, 255); }

.media p, .media [class^="body-"] { margin: var(--spacing-xs) 0; }

.media [class^="heading"] { margin: 0 0 var(--spacing-xs) 0; }

.media [class^="detail"] { margin: 0 0 var(--spacing-xxs) 0; }

.media .action-area { margin-top: var(--spacing-s); margin-bottom: 0px; }

.media div > :last-child { margin-bottom: 0px; }

.media .background { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0px; left: 0px; }

.media .background picture { display: block; position: absolute; inset: 0px; }

.media .background img { object-fit: cover; height: 100%; width: 100%; }

.media > .foreground .media-row { align-items: center; display: flex; flex-direction: column; gap: var(--spacing-s); justify-content: stretch; margin: 0px auto; position: relative; }

.media.media-reverse-mobile .foreground .media-row { flex-direction: column-reverse; }

.media > .foreground .media-row > div { width: 100%; }

.media .text [class*="action-area"] a:not(.con-button) { font-weight: 700; }

.media .text .action-area { display: flex; gap: var(--spacing-s); align-items: flex-start; width: 100%; }

.media .text .icon-area { margin: 0 0 var(--spacing-s) 0; gap: var(--spacing-s); grid-template-columns: 1fr; }

.media .image img { display: block; width: 100%; }

div[class*="-up"] .media { width: 100%; }

div[class*="-up"] .media.has-bg { width: initial; }

.media[class*="-up"] .foreground { max-width: var(--grid-container-width); margin: 0px auto; padding: var(--spacing-s) 0; position: relative; }

.media[class*="-up"] .foreground > .media-row { width: 100%; display: block; max-width: 100%; margin-bottom: var(--spacing-s); }

div[class*="-up"] .media .foreground { width: auto; }

.media[class*="-up"] .foreground > .media-row, div[class*="-up"] .media .foreground > .media-row { padding: 0 0 var(--spacing-m); }

.media ul { padding-left: 20px; margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }

[dir="rtl"] .media ul { padding-left: initial; padding-right: 20px; }

.media.checklist ul { padding: initial; display: flex; flex-direction: column; row-gap: 1px; }

.media.checklist li { list-style-type: none; display: flex; align-items: flex-start; column-gap: 4px; }

.media.checklist li::before { content: ""; width: 20px; height: 24px; flex-shrink: 0; background: url("/libs/img/ui/checkmark-green.svg") 50% calc(50% + 2px) no-repeat transparent; }

.media .subcopy { font-size: var(--type-heading-xs-size); line-height: var(--type-body-s-lh); margin-top: var(--spacing-xs); }

.media h3.heading-xs { margin-top: var(--spacing-s); margin-bottom: var(--spacing-xs); }

.media p.icon-area { margin-bottom: 0px; }

.media p.subcopy-link { margin-top: 0px; margin-bottom: 8px; }

.media svg.icon-milo, img.icon-milo { top: 0.155em; }

.media.qr-code .qr-code-img { display: none; }

.media.qr-code .qr-button-container { display: inline-block; margin: 0px; }

.media.qr-code .google-play, .media.qr-code .app-store { width: 135px; max-width: 140px; height: 40px; font-size: 19px; align-items: center; justify-content: center; padding: 0px; display: inline-flex; margin-top: var(--spacing-xs); margin-inline-end: var(--spacing-s); }

.media.qr-code .google-play { background: url("/libs/img/ui/google-play.svg") no-repeat transparent; }

.media.qr-code .app-store { background: url("/libs/img/ui/app-store.svg") no-repeat transparent; }

.media.bio .avatar { border-radius: 50%; height: var(--icon-size-xl); width: var(--icon-size-xl); overflow: hidden; display: inline-block; }

.media.large .avatar { height: var(--icon-size-xxl); width: var(--icon-size-xxl); }

.media .avatar img { height: var(--icon-size-xl); width: auto; }

.media .icon-stack-area { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--spacing-xs); margin: var(--spacing-s) 0; line-height: 1.3; list-style-type: none; padding: 0px; width: 100%; }

.media .icon-stack-area li, .media .icon-stack-area a { display: flex; gap: var(--spacing-xxs); align-items: center; }

.media .icon-stack-area li picture { line-height: 0; }

.media .icon-stack-area li picture, .media .icon-stack-area a picture img { min-width: var(--icon-size-m); max-width: var(--icon-size-m); }

.media .icon-stack-area > li::before { content: initial; }

.media.static-links .icon-stack-area li a { color: inherit; text-decoration: underline; }

.media.bio .avatar img { object-fit: cover; }

.media.large.bio .avatar img { height: var(--icon-size-xxl); }

.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) { display: flex; align-self: stretch; }

.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) .foreground { display: flex; align-self: stretch; width: 100%; }

.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) .foreground > div.media-row { display: flex; flex-direction: column; width: 100%; }

.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) .foreground .text { display: flex; flex-direction: column; height: 100%; }

.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) [class*="heading-"], .section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) p:not([class*="detail-"]):not(.subcopy-link), .section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) [class*="body-"] { margin-bottom: 0px; }

.section[class*="-up"] .media.merch.bio:not(.media-reverse-mobile, .qr-code) [class*="body-"]:first-child:not(.action-area, .icon-stack-area) { margin-top: 0px; margin-bottom: revert; }

.section[class*="-up"] .media:not(.media-reverse-mobile, .qr-code) .cta-container { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; }

@media screen and (min-width: 600px) {
  .media > .foreground .media-row { gap: var(--spacing-m); flex-direction: row; max-width: 1000px; }
  .media.large > .foreground .media-row .text, .media.large > .foreground .media-row .image { width: 50%; }
  .media.medium-compact > .foreground .media-row .image { width: 41.667%; }
  .media.medium-compact > .foreground .media-row .text { width: 55%; }
  .media[class*="-up"] .foreground > .media-row .image, div[class*="-up"] .media .foreground > .media-row .image { margin-bottom: var(--spacing-s); }
  .media.small > .foreground .media-row { max-width: 800px; }
  .media.medium-compact > .foreground .media-row { max-width: 1200px; }
  .media.large > .foreground .media-row { gap: var(--spacing-m); max-width: 1200px; }
  .media.media-reverse-mobile .foreground .media-row { flex-direction: row; }
  .media[class*="-up"].large > .foreground .media-row .text, .media[class*="-up"].large > .foreground .media-row .image, div[class*="-up"] .media.large > .foreground .media-row .text, div[class*="-up"] .media.large > .foreground .media-row .image { width: 100%; }
  .media.media-reversed .foreground .media-row > div:first-child { order: 2; }
  .media .text .icon-area { grid-template-columns: 1fr 1fr; }
  .media[class*="-up"] .foreground > div.media-row, div[class*="-up"] .media .foreground > div.media-row { padding: 0 0 var(--spacing-s); display: block; }
  .media.two-up .foreground, .media.three-up .foreground, .media.four-up .foreground, .media.five-up .foreground { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; gap: var(--spacing-m); }
  .media .icon-stack-area { grid-template-columns: repeat(2, 1fr); }
  .section[class*="-up"] .media:not(.media-reverse-mobile) .foreground > div.media-row { gap: 0px; }
}

@media screen and (min-width: 1200px) {
  .media > .foreground .media-row { gap: var(--spacing-l); }
  .media.small > .foreground .media-row { gap: var(--spacing-m); }
  .media.large > .foreground .media-row { gap: var(--spacing-xl); margin: 0px auto; }
  .media.large > .foreground .media-row .image { min-width: 700px; }
  .media[class*="-up"].large > .foreground .media-row .image, div[class*="-up"] .media.large > .foreground .media-row .image { min-width: 100%; }
  .media.three-up .foreground { grid-template-columns: repeat(3, 1fr); }
  .media.four-up .foreground { grid-template-columns: repeat(4, 1fr); }
  .media.five-up .foreground { grid-template-columns: repeat(5, 1fr); }
  .media .subcopy { font-size: var(--type-body-xxs-size); line-height: var(--type-body-xxs-lh); margin-top: 8px; }
  .media.qr-code .qr-code-img { display: flex; width: 140px; height: 140px; margin-top: var(--spacing-s); }
  .media.qr-code .google-play, .media.qr-code .app-store { display: none; }
  .media.bio .avatar { height: var(--icon-size-xxl); width: var(--icon-size-xxl); }
  .media.large .avatar { height: 120px; width: 120px; }
  .media .avatar img { height: var(--icon-size-xxl); }
  .media.large.bio .avatar img { height: 120px; }
}

.media.in-modal > .container.foreground { width: 250px; }

@media (min-width: 430px) and (orientation: portrait) {
  .media.in-modal > .container.foreground { width: 320px; }
}

@media (min-width: 430px) and (orientation: landscape) {
  .media.in-modal > .container.foreground { width: 540px; }
}

@media (min-width: 768px) {
  .media.in-modal:not(.full-bleed-image) > .container.foreground { width: 500px; }
}

@media (min-width: 829px) {
  .media.in-modal:not(.full-bleed-image) > .container.foreground { width: 700px; }
}

@media (min-width: 1366px) {
  .media.in-modal > .container.foreground { width: 800px; }
}

.media.in-modal:not(.space-between) > .container.foreground > .media-row { display: grid; gap: 0px; }

.media.in-modal.full-bleed-image { padding: 0px; }

.media.in-modal.full-bleed-image > .container.foreground { width: 100%; }

@media (orientation: portrait) {
  .media.in-modal > .container.foreground > .media-row { grid-template-rows: 1fr auto; }
  .media.in-modal.media-reverse-mobile > .container.foreground > .media-row div:first-child { grid-area: 2 / 1 / 3 / 2; }
  .media.in-modal.media-reverse-mobile > .container.foreground > .media-row div:nth-child(2) { grid-area: 1 / 1 / 2 / 2; }
}

@media (orientation: landscape) {
  .media.in-modal:not(.space-between) > .container.foreground > .media-row { grid-template-columns: 1fr 1fr; }
  .media.in-modal > .container.foreground > .media-row div:first-child { grid-area: 1 / 1 / 2 / 2; }
  .media.in-modal > .container.foreground > .media-row div:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
}

.media.in-modal > .container.foreground > .media-row > .text { width: auto; box-sizing: border-box; }

.media.in-modal.full-bleed-image > .container.foreground > .media-row > .text { padding: var(--spacing-s); }

.media.in-modal.full-bleed-image > .container.foreground > .media-row > .image { height: 100%; }

.media.in-modal.full-bleed-image > .container.foreground > .media-row > .image img { height: 100%; width: 100%; object-fit: cover; }