{"themeId":"classic","version":"2.1.7","templatesById":{"details":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  #cardContainer {\n    padding: 10px;\n    height: 100%;\n  }\n  #card {\n    font-family: var(--slick-details-template-font-family, inherit);\n    background: var(--slick-search-card-background, white);\n    position: relative;\n    border: var(--slick-details-template-card-border, 1px solid #dfe1e5);\n    border-radius: var(--slick-details-template-card-radius, 8px);\n    overflow: hidden;\n    height: 100%;\n  }\n  a#imageLink {\n    display: block;\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    overflow: hidden;\n    position: relative;\n  }\n  slick-image-fit {\n    transition: transform 0.3s ease;\n  }\n  a#imageLink:focus slick-image-fit {\n    transform: scale(1.05);\n  }\n  #playButton {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: white;\n    background: rgba(0,0,0,0.3);\n    border-radius: 50%;\n    padding: 4px;\n    margin-left: -20px;\n    margin-top: -25px;\n    pointer-events: none;\n  }\n  #playButton soso-icon {\n    width: 32px;\n    height: 32px;\n    display: block;\n  }\n  #sectionPanel {\n    color: var(--slick-details-template-section-color, #70757a);\n    font-size: 12px;\n    letter-spacing: 0.5px;\n  }\n  #sectionLink {\n    text-transform: uppercase;\n  }\n  a.link {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    white-space: nowrap;\n    max-width: 140px;\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-bottom: 4px;\n  }\n  #floatedCell {\n    position: absolute;\n    right: 0;\n    bottom: 100%;\n    display: block;\n  }\n  slick-favorite-button {\n    border-radius: 20px 0 0 0;\n    cursor: initial;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    background: var(--slick-search-card-background, rgba(255,255,255,1));\n    height: 30px;\n    padding-right: 12px;\n  }\n  #infoPanel {\n    position: relative;\n    padding: 15px;\n  }\n  a#name {\n    margin-bottom: 4px;\n    font-size: var(--slick-details-template-title-font-size, 16px);\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: var(--slick-details-template-title-line-count, 2);\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    line-height: 1.5;\n    max-height: calc(var(--slick-details-template-title-line-count, 2) * 1.5em);\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #description {\n    font-size: var(--slick-details-template-description-font-size, 14px);\n    color: var(--slick-details-template-description-color, #70757a);\n    line-height: 1.5;\n    word-break: break-word;\n    -webkit-line-clamp: var(--slick-details-description-title-line-count, 2);\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    overflow: hidden;\n    display: -webkit-box;\n    max-height: calc(var(--slick-details-template-description-line-count, 2) * 1.5em);\n  }\n  #textPanel {\n    min-height: calc((var(--slick-details-template-description-line-count, 2) * var(--slick-details-template-description-font-size, 14px) * 1.5) + (var(--slick-details-template-title-line-count, 2) * var(--slick-details-template-title-font-size, 16px) * 1.5) + 4px);\n  }\n  #textPanel.nodescription {\n    min-height: calc((var(--slick-details-template-title-line-count, 2) * var(--slick-details-template-title-font-size, 16px) * 1.5) + 4px);\n  }\n  #ratingPanel {\n    padding: 10px 0 0;\n    font-size: 12px;\n    color: var(--slick-details-template-meta-text-color, #757575);\n    line-height: 16px;\n    --slick-rating-icon-size: 16px;\n  }\n  slick-rating-bar {\n    margin: 0 4px;\n  }\n  .readingTime {\n    padding: 10px 0 0;\n    font-size: 12px;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    line-height: 16px;\n    color: var(--slick-details-template-meta-text-color, #757575);\n    font-style: var(--slick-details-template-meta-font-style, italic);\n  }\n  time {\n    letter-spacing: 0.3px;\n    color: var(--slick-details-template-time-color, #70757a);\n  }\n\n  #card.has-ingreditents #sectionPanel {\n    display: none;\n  }\n  #card.has-ingreditents #description {\n    display: none;\n  }\n  #card.has-ingreditents #textPanel {\n    --slick-details-template-title-line-count: 1;\n    min-height: calc((var(--slick-details-template-title-line-count, 2) * var(--slick-details-template-title-font-size, 16px) * 1.5) + 4px);\n    flex: initial;\n  }\n  #card.has-ingreditents #ratingPanel {\n    padding: 0;\n  }\n  #card.has-ingreditents .readingTime {\n    padding: 0;\n  }\n  #ingPanel {\n    border-top: var(--slick-details-template-ing-top-border, 1px solid #dfe1e5);\n    padding: 8px 0px 0;\n    margin-top: 8px;\n    font-size: var(--slick-details-template-ingredients-font-size, 14px);\n    color: var(--slick-details-template-description-color, #70757a);\n    line-height: 1.5;\n  }\n  \n</style>\n<style>\n  @media(hover:hover) {\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover slick-image-fit{\n      transform: scale(1.05);\n    }\n    a.link:hover {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #floatedCell {\n    right: initial;\n    left: 0;\n  }\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    border-radius: 0 20px 0 0;\n  }\n</style>\n\n<div id=\"cardContainer\">\n  <div id=\"card\" class=\"vertical {{#ingredientListHtml}}has-ingreditents{{/ingredientListHtml}}\">\n    <a id=\"imageLink\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n      <slick-image-fit \n        src=\"{{imageFull}}\" \n        ratio=\"{{imageAspectRatio}}\"\n        overlay=\"{{imageOverlayText}}\"\n        imagewidth=\"{{imageWidth}}\"\n        imageheight=\"{{imageHeight}}\" \n        containment=\"{{imageContainment}}\"></slick-image-fit>\n\n      {{#isVideo}}\n      <div id=\"playButton\">\n        <soso-icon icon=\"play\"></soso-icon>\n      </div>\n      {{/isVideo}}\n    </a>\n    <div id=\"infoPanel\" class=\"flex vertical\">\n      <div id=\"sectionPanel\" class=\"horizontal center\">\n        {{#section}}\n          <a id=\"sectionLink\" class=\"link\" data-section {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n        {{/section}}\n        {{#author}}\n          {{#section}}\n            <span style=\"margin: 0 0.5em 4px;\"> • </span>\n          {{/section}}\n          <a class=\"link\" data-author {{#authorUrl}}href=\"{{authorUrl}}\"{{/authorUrl}}>{{&author}}</a>\n        {{/author}}\n      </div>\n\n      <div id=\"textPanel\" class=\"flex {{^description}}nodescription{{/description}}\">\n        <a id=\"name\" href=\"{{navigationUrl}}\">\n          <span data-title-html>{{&titleHtml}}</span>\n        </a>\n        {{#description}}\n        <div id=\"description\">\n          {{#published}}<time datetime=\"{{published}}\">{{published}} - </time>{{/published}}\n          <span data-description>{{&description}}</span>\n        </div>\n        {{/description}}\n      </div>\n\n      <div class=\"horizontal center\">\n        {{#hasRating}}\n        <div id=\"ratingPanel\" class=\"horizontal center\">\n          <span>{{recipe.avgRating}}</span>\n          <slick-rating-bar rating=\"{{recipe.avgRating}}\"></slick-rating-bar>\n          <span>({{recipe.reviewCount}})</span>\n        </div>\n        {{/hasRating}}\n        <span class=\"flex\"></span>\n        \n        {{#cookingTime}}\n          <div class=\"readingTime\">{{cookingTime}}</div>\n        {{/cookingTime}}\n        \n        {{^cookingTime}}\n        {{#readingTime}}\n          <div class=\"readingTime\">{{readingTime}}</div>\n        {{/readingTime}}\n        {{/cookingTime}}\n      </div>\n\n      {{#ingredientListHtml}}\n      <div id=\"ingPanel\" class=\"flex\">\n        <span data-ingredients>{{&ingredientListHtml}}</span>\n      </div>\n      {{/ingredientListHtml}}\n\n      {{^isVideo}}\n      {{#allowFavorites}}\n      <div id=\"floatedCell\">\n        <slick-favorite-button></slick-favorite-button>\n      </div>\n      {{/allowFavorites}}\n      {{/isVideo}}\n    </div>\n  </div>\n</div>\n"},"google-like":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  #cardContainer {\n    padding: 10px;\n    height: 100%;\n  }\n  #card {\n    font-family: var(--slick-glike-template-font-family, inherit);\n    background: var(--slick-search-card-background, none);\n    position: relative;\n    border: var(--slick-glike-template-card-border, 1px solid #dfe1e5);\n    border-radius: var(--slick-glike-template-card-radius, 4px);\n    overflow: hidden;\n    height: 100%;\n    padding: var(--slick-glike-template-card-padding, 10px);\n  }\n  a#imageLink {\n    display: block;\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    overflow: hidden;\n    position: relative;\n    border-radius: var(--slick-glike-template-image-radius, 4px);\n  }\n  slick-image-fit {\n    transition: transform 0.3s ease;\n    width: var(--slick-glike-template-image-width, 80px);\n  }\n  a#imageLink:focus slick-image-fit {\n    transform: scale(1.05);\n  }\n  #sectionPanel {\n    color: var(--slick-glike-template-section-color, #70757a);\n    font-size: 12px;\n    letter-spacing: 0.5px;\n  }\n  #sectionLink {\n    text-transform: uppercase;\n  }\n  a.link {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    white-space: nowrap;\n    max-width: 140px;\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-bottom: 4px;\n  }\n  slick-favorite-button {\n    cursor: initial;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    background: var(--slick-search-panel-background, rgba(255,255,255,1));\n    margin-left: -10px;\n  }\n  #infoPanel {\n    position: relative;\n  }\n  a#name {\n    margin-bottom: 4px;\n    font-size: var(--slick-glike-template-title-font-size, 16px);\n    text-decoration: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    outline: none;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: var(--slick-glike-template-title-line-count, 2);\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    line-height: 1.5;\n    max-height: calc(var(--slick-glike-template-title-line-count, 2) * 1.5em);\n    max-width: var(--slick-glike-template-max-content-width, 800px);\n  }\n  #description {\n    font-size: var(--slick-glike-template-description-font-size, 14px);\n    color: var(--slick-glike-template-description-color, #70757a);\n    line-height: 1.5;\n    word-break: break-word;\n    -webkit-line-clamp: var(--slick-glike-description-title-line-count, 2);\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    overflow: hidden;\n    display: -webkit-box;\n    max-width: var(--slick-glike-template-max-content-width, 800px);\n    max-height: calc(var(--slick-glike-template-description-line-count, 2) * 1.5em);\n  }\n  #metaPanel {\n    max-width: var(--slick-glike-template-max-content-width, 800px);\n  }\n  #ratingPanel {\n    font-size: 12px;\n    color: var(--slick-glike-template-meta-text-color, #757575);\n    line-height: 16px;\n    --slick-rating-icon-size: 16px;\n  }\n  slick-rating-bar {\n    margin: 0 4px;\n  }\n  .readingTime {\n    font-size: 12px;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    line-height: 16px;\n    color: var(--slick-glike-template-meta-text-color, #757575);\n    font-style: var(--slick-glike-template-meta-font-style, italic);\n  }\n  time {\n    letter-spacing: 0.3px;\n    color: var(--slick-glike-template-time-color, #70757a);\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    a#name {\n      color: inherit;\n    }\n    a#name:focus {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover slick-image-fit{\n      transform: scale(1.05);\n    }\n    a.link:hover {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n\n<div id=\"cardContainer\">\n  <div id=\"card\" class=\"horizontal center\">\n    <div id=\"infoPanel\" class=\"flex\">\n      <div id=\"sectionPanel\" class=\"horizontal center\">\n        {{#section}}\n          <a id=\"sectionLink\" class=\"link\" data-section {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n        {{/section}}\n        {{#author}}\n          {{#section}}\n            <span style=\"margin: 0 0.5em 4px;\"> • </span>\n          {{/section}}\n          <a class=\"link\" data-author {{#authorUrl}}href=\"{{authorUrl}}\"{{/authorUrl}}>{{&author}}</a>\n        {{/author}}\n      </div>\n\n      <a id=\"name\" href=\"{{navigationUrl}}\">\n        <span data-title-html>{{&titleHtml}}</span>\n      </a>\n      {{#description}}\n      <div id=\"description\">\n        {{#published}}<time datetime=\"{{published}}\">{{published}} - </time>{{/published}}\n        <span data-description>{{&description}}</span>\n      </div>\n      {{/description}}\n\n      <div id=\"metaPanel\" class=\"horizontal center\">\n        {{#allowFavorites}}\n          <slick-favorite-button></slick-favorite-button>\n        {{/allowFavorites}}\n\n        <span class=\"flex\"></span>\n\n        {{#hasRating}}\n        <div id=\"ratingPanel\" class=\"horizontal center\">\n          <span>{{recipe.avgRating}}</span>\n          <slick-rating-bar rating=\"{{recipe.avgRating}}\"></slick-rating-bar>\n          <span>({{recipe.reviewCount}})</span>\n        </div>\n        {{/hasRating}}\n\n        {{^hasRating}}\n          {{#cookingTime}}\n            <div class=\"readingTime\">{{cookingTime}}</div>\n          {{/cookingTime}}\n          {{^cookingTime}}\n            {{#readingTime}}\n              <div class=\"readingTime\">{{readingTime}}</div>\n            {{/readingTime}}\n          {{/cookingTime}}\n        {{/hasRating}}\n      </div>\n\n      \n    </div>\n\n    {{#imageThumbnail}}\n    <div style=\"padding: 0 0 0 8px;\">\n      <a id=\"imageLink\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n        <slick-image-fit \n          src=\"{{imageThumbnail}}\"\n          ratio=\"{{imageAspectRatio}}\"\n          imagewidth=\"{{imageWidth}}\"\n          imageheight=\"{{imageHeight}}\"\n          containment=\"{{imageContainment}}\"></slick-image-fit>\n      </a>\n    </div>\n    {{/imageThumbnail}}\n  </div>\n</div>\n"},"small":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  :host {\n    font-family: var(--slick-filmstrip-template-font-family, inherit);\n  }\n  a, a:visited, a:hover {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n    height: 100%;\n  }\n  #cardPanel {\n    position: relative;\n    height: 100%;\n    padding: 8px;\n    box-sizing: border-box;\n  }\n  #card {\n    height: 100%;\n    font-size: var(--slick-filmstrip-template-font-size, 13px);\n  }\n  #textPanel {\n    padding: 2px 0 2px 10px;\n  }\n  #card::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 4.55%;\n    width: 100%;\n    height: 90.9%;\n    box-sizing: border-box;\n    background: var(--slick-discovery-highlight-color, #2196f3);\n    opacity: 0;\n    transition: opacity 0.28s ease;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  slick-image-fit {\n    width: var(--slick-filmstrip-template-image-width, 64px);\n    border-radius: var(--slick-filmstrip-template-image-radius, 5px);\n    background-color: var(--slick-filmstrip-template-noimage-background, #f0f0f0);\n  }\n  #title {\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: var(--slick-filmstrip-template-title-line-count, 2);\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    line-height: 1.5;\n    max-height: calc(var(---slick-filmstrip-template-title-line-count, 2) * 1.5em);\n  }\n\n  @media(hover:hover) {\n    slick-image-fit  {\n      transition: transform 0.3s ease;\n    }\n    #card:hover slick-image-fit  {\n      transform: scale(1.1);\n    }\n    #card:hover::before {\n      opacity: 0.05;\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #textPanel {\n    padding: 2px 10px 2px 0;\n  }\n</style>\n\n<div id=\"cardPanel\">\n  <a id=\"cardLink\" href=\"{{navigationUrl}}\">\n    <div id=\"card\" class=\"horizontal center\">\n      <slick-image-fit\n        src=\"{{imageThumbnail}}\"\n        imagewidth=\"{{imageWidth}}\"\n        imageheight=\"{{imageHeight}}\"\n        ratio=\"{{imageAspectRatio}}\"\n        containment=\"{{imageContainment}}\"></slick-image-fit>\n      <div id=\"textPanel\" class=\"flex\">\n        <div id=\"title\" data-title-html>{{&titleHtml}}</div>\n      </div>\n    </div>\n  </a>\n</div>\n"},"list-item":{"htmlTemplate":"\n<style>\n  * {\n    box-sizing: border-box;\n  }\n  .layout.horizontal,\n  .layout.vertical {\n    display: -ms-flexbox;\n    display: -webkit-flex;\n    display: flex;\n  }\n  .layout.horizontal {\n    -ms-flex-direction: row;\n    -webkit-flex-direction: row;\n    flex-direction: row;\n  }\n  .layout.vertical {\n    -ms-flex-direction: column;\n    -webkit-flex-direction: column;\n    flex-direction: column;\n  }\n  .layout.center {\n    -ms-flex-align: center;\n    -webkit-align-items: center;\n    align-items: center;\n  }\n  .layout.wrap {\n    -ms-flex-wrap: wrap;\n    -webkit-flex-wrap: wrap;\n    flex-wrap: wrap;\n  }\n  .flex {\n    -ms-flex: 1 1 0.000000001px;\n    -webkit-flex: 1;\n    flex: 1;\n    -webkit-flex-basis: 0.000000001px;\n    flex-basis: 0.000000001px;\n  }\n  :host {\n    display: block;\n    padding: 20px 12px;\n    font-family: var(--slick-article-template-font-family, inherit);\n  }\n  :host(:not(:last-of-type)) {\n    border-bottom: 1px solid #e5e5e5;\n  }\n  #metaPanel {\n    flex: 0 0 25%;\n    max-width: 25%;\n  }\n  slick-favorite-button {\n    margin: 8px 0 0 -10px;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  time {\n    font-size: var(--slick-article-template-date-size, 13px);\n    display: block;\n    letter-spacing: 1px;\n    margin-bottom: 6px;\n    color: #808080;\n  }\n  .sectionTitle {\n    font-size: var(--slick-article-template-section-title-size, 13px);\n    text-transform: uppercase;\n    letter-spacing: 1px;\n  }\n  a.titleLink {\n    text-decoration: none;\n    font-size: var(--slick-article-template-title-size, 20px);\n    color: inherit;\n    outline: none;\n    display: inline-block;\n    border: none;\n  }\n  #titleLinkPanel {\n    max-width: 820px;\n  }\n  #description {\n    margin-top: 8px;\n    font-size: var(--slick-article-template-description-size, 14px);\n    max-width: 820px;\n  }\n  #byline {\n    margin: 8px 0 0;\n    font-size: var(--slick-article-template-author-size, 13px);\n    color: #808080;\n    font-style: italic;\n  }\n  #imagePanel {\n    margin-left: 16px;\n  }\n  a.imageLink {\n    text-decoration: none;\n    outline: none;\n    border: none;\n    display: block;\n    transition: transform 0.28s ease;\n    position: relative;\n  }\n  a.imageLink slick-image-fit {\n    border-radius: var(--slick-article-template-image-radius, 5px);\n    display: block;\n    width: var(--slick-article-template-image-width, 100px);\n  }\n  .overlayIcon {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: white;\n    background: rgba(0,0,0,0.3);\n    padding: 6px;\n    box-sizing: initial;\n    border-radius: 50%;\n    transform: translate3d(-50%, -50%, 0);\n    pointer-events: none;\n  }\n  #pinnedLabel.horizontal.layout {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    font-size: 13px;\n    letter-spacing: 0.5px;\n    margin-bottom: 12px;\n  }\n  #pinnedLabel soso-icon {\n    margin-right: 8px;\n    width: 20px;\n    height: 20px;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a.link {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #ratingPanel {\n    padding: 10px 0 0;\n    font-size: 12px;\n    color: var(--slick-article-template-meta-text-color, #757575);\n    line-height: 16px;\n    --slick-rating-icon-size: 16px;\n  }\n  slick-rating-bar {\n    margin: 0 4px;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    #card:hover a.titleLink {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    a.imageLink:hover{\n      transform: scale(1.05);\n    }\n    a.link {\n      color: inherit;\n    }\n    #card:hover a.link {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #imagePanel {\n    margin-right: 16px;\n    margin-left: 0;\n  }\n  :host([dir=\"rtl\"]) #pinnedLabel soso-icon {\n    margin-left: 8px;\n    margin-right: 0;\n  }\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    margin: 8px -10px 0 0;\n  }\n</style>\n<div id=\"card\" class=\"horizontal layout\">\n  <div id=\"metaPanel\">\n    {{#published}}\n    <time datetime=\"{{published}}\">{{published}}</time>\n    {{/published}}\n\n    {{#section}}\n    <div class=\"sectionTitle\">\n      <a class=\"link\" data-section {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n    </div>\n    {{/section}}\n\n    {{#hasRating}}\n    <div id=\"ratingPanel\" class=\"horizontal center\">\n      <span>{{recipe.avgRating}}</span>\n      <slick-rating-bar rating=\"{{recipe.avgRating}}\"></slick-rating-bar>\n      <span>({{recipe.reviewCount}})</span>\n    </div>\n    {{/hasRating}}\n\n    {{#allowFavorites}}\n    <slick-favorite-button></slick-favorite-button>\n    {{/allowFavorites}}\n  </div>\n\n  <div id=\"mainPanel\" class=\"flex\">\n    {{#pinned}}\n    <div id=\"pinnedLabel\" class=\"horizontal layout center\">\n      <soso-icon icon=\"pin\"></soso-icon>\n      <span>Pinned post</span>\n    </div>\n    {{/pinned}}\n    <div class=\"horizontal layout\">\n      <div class=\"flex\">\n        <div id=\"titleLinkPanel\">\n          <a class=\"titleLink\" href=\"{{navigationUrl}}\" data-title-html>{{&titleHtml}}</a>\n        </div>\n\n        {{#description}}\n          <p id=\"description\" data-description>{{&description}}</p>\n        {{/description}}\n\n        {{#author}}\n        <p id=\"byline\">\n          <a class=\"link\" data-author {{#authorUrl}}href=\"{{authorUrl}}\"{{/authorUrl}}>{{&author}}</a>\n        </p>\n        {{/author}}\n      </div>\n\n      {{#imageThumbnail}}\n      <div id=\"imagePanel\">\n        <a class=\"imageLink\" \n          aria-label=\"{{titleText}}\" \n          href=\"{{navigationUrl}}\">\n\n          <slick-image-fit \n            src=\"{{imageThumbnail}}\"\n            overlay=\"{{imageOverlayText}}\"\n            imagewidth=\"{{imageWidth}}\"\n            imageheight=\"{{imageHeight}}\"\n            ratio=\"{{imageAspectRatio}}\"\n            containment=\"{{imageContainment}}\"></slick-image-fit>\n\n          {{#isWebstory}}\n          <soso-icon class=\"overlayIcon\" icon=\"carousel\"></soso-icon>\n          {{/isWebstory}}\n\n          {{#isVideo}}\n          <soso-icon class=\"overlayIcon\" icon=\"play\"></soso-icon>\n          {{/isVideo}}\n        </a>\n      </div>\n      {{/imageThumbnail}}\n      \n    </div>\n  </div>\n\n</div>\n"},"story-details":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  \n  #cardPanel {\n    position: relative;\n    padding: 10px;\n    box-sizing: border-box;\n  }\n  a, a:visited, a:hover {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n    position: relative;\n  }\n  #card {\n    font-family: var(--slick-story-details-template-font-family, inherit);\n    box-shadow: var(--slick-story-details-template-card-shadow, 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12));\n    position: relative;\n    border-radius: var(--slick-story-details-template-card-radius, 10px);\n    overflow: hidden;\n  }\n  slick-favorite-button {\n    cursor: initial;\n    pointer-events: auto;\n    display: inline-block;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    --fab-padding: 7px;\n    --fab-icon-size: 18px;\n    background: var(--slick-story-details-template-fav-background, rgba(255,255,255,0.75));\n    border-radius: 50%;\n  }\n  #pageTypeIcon {\n    position: absolute;\n    top: 6px;\n    left: 6px;\n    color: white;\n    opacity: 0.95;\n  }\n  #cardLink {\n    width: var(--slick-story-details-template-image-width, 30%);\n  }\n  #sectionPanel {\n    color: var(--slick-details-template-section-color, #70757a);\n    font-size: 12px;\n    letter-spacing: 0.5px;\n  }\n  #sectionLink {\n    text-transform: uppercase;\n  }\n  a.link {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    white-space: nowrap;\n    max-width: 140px;\n    display: inline-block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-bottom: 4px;\n  }\n  #infoPanel {\n    padding: 0 0 0 15px;\n  }\n  a#name {\n    margin-bottom: 4px;\n    font-size: var(--slick-details-template-title-font-size, 16px);\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: var(--slick-details-template-title-line-count, 2);\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    line-height: 1.5;\n    max-height: calc(var(--slick-details-template-title-line-count, 2) * 1.5em);\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #description {\n    font-size: var(--slick-details-template-description-font-size, 14px);\n    color: var(--slick-details-template-description-color, #70757a);\n    line-height: 1.5;\n    word-break: break-word;\n    -webkit-line-clamp: var(--slick-details-description-title-line-count, 2);\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    overflow: hidden;\n    display: -webkit-box;\n    max-height: calc(var(--slick-details-template-description-line-count, 2) * 1.5em);\n  }\n  time {\n    letter-spacing: 0.3px;\n    color: var(--slick-details-template-time-color, #70757a);\n  }\n  #ratingPanel {\n    padding: 10px 0 0;\n    font-size: 12px;\n    color: var(--slick-details-template-meta-text-color, #757575);\n    line-height: 16px;\n    --slick-rating-icon-size: 16px;\n  }\n  slick-rating-bar {\n    margin: 0 4px;\n  }\n\n  @media(hover:hover) {\n    #card {\n      transition: box-shadow 0.3s ease, transform 0.28s ease;\n    }\n    #cardPanel:hover #card {\n      transform: scale(1.03);\n      box-shadow: var(--slick-story-details-template-card-hover-shadow, 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12));\n    }\n    #cardPanel:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    a.link:hover {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n<div id=\"cardPanel\" class=\"horizontal center\">\n  <a id=\"cardLink\" href=\"{{navigationUrl}}\">\n    <div id=\"card\">\n      <slick-image-fit\n        src=\"{{imageThumbnail}}\"\n        imagewidth=\"{{imageWidth}}\"\n        imageheight=\"{{imageHeight}}\"\n        ratio=\"{{imageAspectRatio}}\"\n        containment=\"{{imageContainment}}\"></slick-image-fit>\n      {{#allowFavorites}}\n        <slick-favorite-button hidecount></slick-favorite-button>\n      {{/allowFavorites}}\n      {{#showPageType}}\n        {{#isWebstory}}\n        <soso-icon id=\"pageTypeIcon\" icon=\"carousel\" title=\"Web Story\"></soso-icon>\n        {{/isWebstory}}\n      {{/showPageType}}\n    </div>\n  </a>\n  <div id=\"infoPanel\" class=\"flex\">\n    <div id=\"sectionPanel\" class=\"horizontal center\">\n      {{#section}}\n        <a id=\"sectionLink\" class=\"link\" data-section {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n      {{/section}}\n      {{#author}}\n        {{#section}}\n          <span style=\"margin: 0 0.5em 4px;\"> • </span>\n        {{/section}}\n        <a class=\"link\" data-author {{#authorUrl}}href=\"{{authorUrl}}\"{{/authorUrl}}>{{&author}}</a>\n      {{/author}}\n    </div>\n\n    <a id=\"name\" href=\"{{navigationUrl}}\">\n      <span data-title-html>{{&titleHtml}}</span>\n    </a>\n    {{#description}}\n    <div id=\"description\">\n      {{#published}}<time datetime=\"{{published}}\">{{published}} - </time>{{/published}}\n      <span data-description>{{&description}}</span>\n    </div>\n    {{/description}}\n\n    {{#hasRating}}\n    <div id=\"ratingPanel\" class=\"horizontal center\">\n      <span>{{recipe.avgRating}}</span>\n      <slick-rating-bar rating=\"{{recipe.avgRating}}\"></slick-rating-bar>\n      <span>({{recipe.reviewCount}})</span>\n    </div>\n    {{/hasRating}}\n  </div>\n</div>\n"},"title-on-image":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  #cardPanel {\n    position: relative;\n    padding: 10px;\n    box-sizing: border-box;\n  }\n\n  a, a:visited, a:hover {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n    height: 100%;\n    position: relative;\n  }\n\n  #card {\n    font-family: var(--slick-text-on-image-template-font-family, inherit);\n    box-shadow: var(--slick-text-on-image-template-card-shadow, 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12));\n    position: relative;\n    border-radius: var(--slick-text-on-image-template-card-radius, 10px);\n    overflow: hidden;\n  }\n\n  #cardOverlay {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    padding: 16px 12px;\n    background: var(--slick-text-on-image-template-text-bg, linear-gradient(to top, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0)));\n    border-radius: 0 0 var(--slick-text-on-image-template-card-radius, 10px) var(--slick-text-on-image-template-card-radius, 10px);\n    color: var(--slick-text-on-image-template-font-color, white);\n    font-size: var(--slick-text-on-image-template-font-size, 16px);\n    font-weight: var(--slick-text-on-image-template-font-weight, 400);\n    pointer-events: none;\n  }\n  #cardOverlay .pageTitle {\n    opacity: 0;\n  }\n  #outerOverlay {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    padding: 0 22px 26px;\n    color: var(--slick-text-on-image-template-font-color, white);\n    font-size: var(--slick-text-on-image-template-font-size, 16px);\n    font-weight: var(--slick-text-on-image-template-font-weight, 400);\n    pointer-events: none;\n  }\n  .pageTitle {\n    line-height: var(--slick-text-on-image-template-line-height, 1.35);\n    -webkit-line-clamp: var(--slick-text-on-image-template-line-count, 3);\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    overflow: hidden;\n    letter-spacing:var(--slick-text-on-image-template-letter-spacing, 0.5px);\n  }\n  slick-favorite-button {\n    cursor: initial;\n    pointer-events: auto;\n    display: inline-block;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    --fab-padding: 7px;\n    --fab-icon-size: 18px;\n    background: var(--slick-text-on-image-template-fav-background, rgba(255,255,255,0.75));\n    border-radius: 50%;\n  }\n  #pageTypeIcon {\n    position: absolute;\n    top: 6px;\n    left: 6px;\n    color: white;\n    opacity: 0.95;\n  }\n  mark {\n    color: yellow;\n    background: none;\n    font-weight: bold;\n  }\n\n  @media(hover:hover) {\n    #card {\n      transition: box-shadow 0.3s ease, transform 0.28s ease;\n    }\n    #card:hover {\n      transform: scale(1.03);\n      box-shadow: var(--slick-text-on-image-template-card-hover-shadow, 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12));\n    }\n  }\n</style>\n<div id=\"cardPanel\">\n  <a href=\"{{navigationUrl}}\">\n    <div id=\"card\">\n      <slick-image-fit\n        src=\"{{imageThumbnail}}\"\n        imagewidth=\"{{imageWidth}}\"\n        imageheight=\"{{imageHeight}}\"\n        ratio=\"{{imageAspectRatio}}\"\n        containment=\"{{imageContainment}}\"></slick-image-fit>\n      <div id=\"cardOverlay\" class=\"vertical layout\">\n        <div class=\"pageTitle\" data-title-html>{{&titleHtml}}</div>\n      </div>\n      {{#allowFavorites}}\n        <slick-favorite-button hidecount></slick-favorite-button>\n      {{/allowFavorites}}\n      {{#showPageType}}\n        {{#isWebstory}}\n        <soso-icon id=\"pageTypeIcon\" icon=\"carousel\" title=\"Web Story\"></soso-icon>\n        {{/isWebstory}}\n      {{/showPageType}}\n    </div>\n  </a>\n  <div id=\"outerOverlay\" class=\"vertical layout\">\n    <div class=\"pageTitle\" data-title-html>{{&titleHtml}}</div>\n  </div>\n</div>\n"},"title-u-image":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #card {\n    font-family: var(--slick-title-under-image-template-font-family, inherit);\n    background: var(--slick-search-panel-background, white);\n    font-size: 13px;\n    padding: 10px;\n    position: relative;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    font-size: var(--slick-title-under-image-template-title-font-size, 14px);\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    margin: 8px 0 0;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: var(--slick-title-under-image-template-line-count, 2);\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    line-height: 1.5;\n    height: calc(var(--slick-title-under-image-template-line-count, 2) * 1.5em);\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  a#imageLink {\n    display: block;\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    border-radius: var(--slick-title-under-image-template-image-radius, 5px);\n    overflow: hidden;\n    position: relative;\n  }\n  slick-image-fit {\n    transition: transform 0.3s ease;\n  }\n  a#imageLink:focus slick-image-fit {\n    transform: scale(1.05);\n  }\n  #floatedCell {\n    position: absolute;\n    right: 0;\n    bottom: 100%;\n    display: block;\n  }\n  slick-favorite-button {\n    border-radius: 20px 0 0 0;\n    cursor: initial;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    background: var(--slick-search-panel-background, rgba(255,255,255,1));\n    height: 30px;\n  }\n  #ratingPanel {\n    padding: 6px 0;\n    font-size: 12px;\n    color: #757575;\n    line-height: 16px;\n    --slick-rating-icon-size: 16px;\n  }\n  slick-rating-bar {\n    margin: 0 4px;\n  }\n  #sectionPanel {\n    color: var(--slick-title-under-image-section-color, #70757a);\n    font-size: 12px;\n    letter-spacing: 1px;\n    margin-top: 8px;\n    margin-bottom: -6px;\n  }\n  #sectionLink {\n    text-transform: uppercase;\n  }\n  a.link {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n  }\n  #playButton {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: white;\n    background: rgba(0,0,0,0.3);\n    border-radius: 50%;\n    padding: 4px;\n    margin-left: -20px;\n    margin-top: -25px;\n    pointer-events: none;\n  }\n  #playButton soso-icon {\n    width: 32px;\n    height: 32px;\n    display: block;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover slick-image-fit{\n      transform: scale(1.05);\n    }\n    a.link:hover {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #floatedCell {\n    right: initial;\n    left: 0;\n  }\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    border-radius: 0 20px 0 0;\n  }\n</style>\n<div id=\"card\" class=\"vertical\">\n  <a id=\"imageLink\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n    <slick-image-fit\n      src=\"{{imageThumbnail}}\"\n      overlay=\"{{imageOverlayText}}\"\n      imagewidth=\"{{imageWidth}}\"\n      imageheight=\"{{imageHeight}}\"\n      ratio=\"{{imageAspectRatio}}\"\n      containment=\"{{imageContainment}}\"></slick-image-fit>\n    \n    {{#isVideo}}\n    <div id=\"playButton\">\n      <soso-icon icon=\"play\"></soso-icon>\n    </div>\n    {{/isVideo}}\n  </a>\n\n  <div style=\"position: relative;\">\n\n    {{#section}}\n      <div id=\"sectionPanel\" class=\"horizontal center\">\n        <a id=\"sectionLink\" class=\"link\" data-section {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n      </div>\n    {{/section}}\n\n    <a id=\"name\" href=\"{{navigationUrl}}\">\n      <span data-title-html>{{&titleHtml}}</span>\n    </a>\n\n    {{#hasRating}}\n    <div id=\"ratingPanel\" class=\"horizontal center\">\n      <span>{{recipe.avgRating}}</span>\n      <slick-rating-bar rating=\"{{recipe.avgRating}}\"></slick-rating-bar>\n      <span>({{recipe.reviewCount}})</span>\n    </div>\n    {{/hasRating}}\n    \n    {{^isVideo}}\n    {{#allowFavorites}}\n    <div id=\"floatedCell\">\n      <slick-favorite-button></slick-favorite-button>\n    </div>\n    {{/allowFavorites}}\n    {{/isVideo}}\n    \n  </div>\n</div>\n"},"slick-article-wide":{"htmlTemplate":"\n<style>\n  * {\n    box-sizing: border-box;\n  }\n  .layout.horizontal,\n  .layout.vertical {\n    display: -ms-flexbox;\n    display: -webkit-flex;\n    display: flex;\n  }\n  .layout.horizontal {\n    -ms-flex-direction: row;\n    -webkit-flex-direction: row;\n    flex-direction: row;\n  }\n  .layout.vertical {\n    -ms-flex-direction: column;\n    -webkit-flex-direction: column;\n    flex-direction: column;\n  }\n  .layout.center {\n    -ms-flex-align: center;\n    -webkit-align-items: center;\n    align-items: center;\n  }\n  .layout.wrap {\n    -ms-flex-wrap: wrap;\n    -webkit-flex-wrap: wrap;\n    flex-wrap: wrap;\n  }\n  .flex {\n    -ms-flex: 1 1 0.000000001px;\n    -webkit-flex: 1;\n    flex: 1;\n    -webkit-flex-basis: 0.000000001px;\n    flex-basis: 0.000000001px;\n  }\n  :host {\n    display: block;\n    padding: 20px 12px;\n    font-family: var(--slick-article-template-font-family, inherit);\n  }\n  :host(:not(:last-of-type)) {\n    border-bottom: 1px solid #e5e5e5;\n  }\n  #metaPanel {\n    flex: 0 0 25%;\n    max-width: 25%;\n  }\n  slick-favorite-button {\n    margin: 8px 0 0 -10px;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  time {\n    font-size: var(--slick-article-template-date-size, 13px);\n    display: block;\n    letter-spacing: 1px;\n    margin-bottom: 6px;\n    color: #808080;\n  }\n  .sectionTitle {\n    font-size: var(--slick-article-template-section-title-size, 13px);\n    text-transform: uppercase;\n    letter-spacing: 1px;\n  }\n  a.titleLink {\n    text-decoration: none;\n    font-size: var(--slick-article-template-title-size, 20px);\n    color: inherit;\n    outline: none;\n    display: inline-block;\n    border: none;\n  }\n  #titleLinkPanel {\n    max-width: 820px;\n  }\n  #description {\n    margin-top: 8px;\n    font-size: var(--slick-article-template-description-size, 14px);\n    max-width: 820px;\n  }\n  #byline {\n    margin: 8px 0 0;\n    font-size: var(--slick-article-template-author-size, 13px);\n    color: #808080;\n    font-style: italic;\n  }\n  #imagePanel {\n    margin-left: 16px;\n  }\n  a.imageLink {\n    text-decoration: none;\n    outline: none;\n    border: none;\n    display: block;\n    transition: transform 0.28s ease;\n    position: relative;\n  }\n  a.imageLink slick-image {\n    border-radius: var(--slick-article-template-image-radius, 5px);\n    display: block;\n    max-width: 128px;\n    max-height: 190px;\n  }\n  .overlayIcon {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: white;\n    background: rgba(0,0,0,0.3);\n    padding: 6px;\n    box-sizing: initial;\n    border-radius: 50%;\n    transform: translate3d(-50%, -50%, 0);\n    pointer-events: none;\n  }\n  #pinnedLabel.horizontal.layout {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    font-size: 13px;\n    letter-spacing: 0.5px;\n    margin-bottom: 12px;\n  }\n  #pinnedLabel soso-icon {\n    margin-right: 8px;\n    width: 20px;\n    height: 20px;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a.link {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    #card:hover a.titleLink {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    a.imageLink:hover{\n      transform: scale(1.05);\n    }\n    a.link {\n      color: inherit;\n    }\n    #card:hover a.link {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #imagePanel {\n    margin-right: 16px;\n    margin-left: 0;\n  }\n  :host([dir=\"rtl\"]) #pinnedLabel soso-icon {\n    margin-left: 8px;\n    margin-right: 0;\n  }\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    margin: 8px -10px 0 0;\n  }\n</style>\n<div id=\"card\" class=\"horizontal layout\">\n  <div id=\"metaPanel\">\n    {{#published}}\n    <time datetime=\"{{published}}\">{{published}}</time>\n    {{/published}}\n\n    {{#section}}\n    <div class=\"sectionTitle\">\n      <a class=\"link\" data-section {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n    </div>\n    {{/section}}\n\n    {{#allowFavorites}}\n    <slick-favorite-button></slick-favorite-button>\n    {{/allowFavorites}}\n  </div>\n\n  <div id=\"mainPanel\" class=\"flex\">\n    {{#pinned}}\n    <div id=\"pinnedLabel\" class=\"horizontal layout center\">\n      <soso-icon icon=\"pin\"></soso-icon>\n      <span>Pinned post</span>\n    </div>\n    {{/pinned}}\n    <div class=\"horizontal layout\">\n      <div class=\"flex\">\n        <div id=\"titleLinkPanel\">\n          <a class=\"titleLink\" href=\"{{navigationUrl}}\" data-title-html>{{&titleHtml}}</a>\n        </div>\n        <p id=\"description\" data-description>{{#description}}{{&description}}{{/description}}</p>\n        {{#author}}\n        <p id=\"byline\">\n          <a class=\"link\" data-author {{#authorUrl}}href=\"{{authorUrl}}\"{{/authorUrl}}>{{&author}}</a>\n        </p>\n        {{/author}}\n      </div>\n\n      {{#imageThumbnail}}\n      <div id=\"imagePanel\">\n        <a class=\"imageLink\" \n          aria-label=\"{{titleText}}\" \n          href=\"{{navigationUrl}}\">\n\n          <slick-image\n            imagewidth=\"{{imageWidth}}\"\n            imageheight=\"{{imageHeight}}\"\n            src=\"{{imageThumbnail}}\"></slick-image>\n\n          {{#isWebstory}}\n          <soso-icon class=\"overlayIcon\" icon=\"carousel\"></soso-icon>\n          {{/isWebstory}}\n\n          {{#isVideo}}\n          <soso-icon class=\"overlayIcon\" icon=\"play\"></soso-icon>\n          {{/isVideo}}\n        </a>\n      </div>\n      {{/imageThumbnail}}\n      \n    </div>\n  </div>\n\n</div>\n"},"text-u-image-flex":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #card {\n    font-family: var(--slick-text-under-image-template-font-family, inherit);\n    background: var(--slick-search-panel-background, white);\n    font-size: 13px;\n    padding: 10px;\n    position: relative;\n  }\n  #imageContainer {\n    border-radius: var(--slick-text-under-image-template-image-radius, 5px);\n    overflow: hidden;\n    width: 100%;\n  }\n  #imagePanel {\n    height: var(--slick-text-under-image-template-image-height, 128px);\n    width: 100%;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n    position: relative;\n    outline: none;\n    box-sizing: border-box;\n    margin: 0;\n    transition: transform 0.3s ease;\n    display: block;\n    overflow: hidden;\n  }\n  a#name {\n    text-decoration: none;\n    font-size: var(--slick-text-under-image-template-title-font-size, 14px);\n    color: inherit;\n    outline: none;\n    margin: 8px 0 0;\n    display: block;\n    word-break: break-word;\n  }\n  #floatedCell {\n    float: right;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #imagePanel:focus {\n    transform: scale(1.05);\n  }\n  slick-favorite-button {\n    border-radius: 20px 0 0 0;\n    margin-top: -30px;\n    cursor: initial;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    background: var(--slick-search-panel-background, rgba(255,255,255,1));\n  }\n  slick-image {\n    height: 100%;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    a#name:hover {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #imagePanel:hover{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #floatedCell {\n    float: left;\n  }\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    border-radius: 0 20px 0 0;\n  }\n</style>\n<div id=\"card\" class=\"vertical\">\n  <div id=\"imageContainer\">\n    <a id=\"imagePanel\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n      <slick-image sized src=\"{{imageThumbnail}}\"></slick-image>\n    </a>\n  </div>\n  <div style=\"position: relative;\">\n    <a id=\"name\" href=\"{{navigationUrl}}\">\n      {{#allowFavorites}}\n      <div id=\"floatedCell\">\n        <slick-favorite-button rightalign></slick-favorite-button>\n      </div>\n      {{/allowFavorites}}\n      <span data-title-html>{{&titleHtml}}</span>\n    </a>\n  </div>\n</div>\n"},"text-u-image-block":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #card {\n    font-family: var(--slick-text-under-image-template-font-family, inherit);\n    background: var(--slick-search-panel-background, white);\n    padding: 10px;\n    position: relative;\n    height: 100%;\n  }\n  #imageContainer {\n    border-radius: var(--slick-text-under-image-template-image-radius, 5px);\n    overflow: hidden;\n    width: 100%;\n  }\n  #imagePanel {\n    height: 100%;\n    width: 100%;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n    position: relative;\n    outline: none;\n    box-sizing: border-box;\n    margin: 0;\n    display: block;\n    overflow: hidden;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    margin: 8px 0 0;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    line-height: 1.5;\n    max-height: 3em;\n  }\n  #floatedCell {\n    position: absolute;\n    right: 0;\n    bottom: 100%;\n    display: block;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #imagePanel:focus slick-image {\n    transform: scale(1.05);\n  }\n  slick-favorite-button {\n    border-radius: 20px 0 0 0;\n    cursor: initial;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    background: var(--slick-search-panel-background, rgba(255,255,255,1));\n    height: 30px;\n  }\n  slick-image {\n    height: 100%;\n    transition: transform 0.3s ease;\n  }\n  #textPanel {\n    position: relative;\n    font-size: var(--slick-text-under-image-template-title-font-size, 14px);\n    height: calc(3em + 10px);\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    a#name:hover {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #imagePanel:hover slick-image{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #floatedCell {\n    right: initial;\n    left: 0;\n  }\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    border-radius: 0 20px 0 0;\n  }\n</style>\n<div id=\"card\" class=\"vertical\">\n  <div id=\"imageContainer\" class=\"flex\">\n    <a id=\"imagePanel\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n      <slick-image sized src=\"{{imageThumbnail}}\"></slick-image>\n    </a>\n  </div>\n  <div id=\"textPanel\">\n    <a id=\"name\" href=\"{{navigationUrl}}\">\n      <span data-title-html>{{&titleHtml}}</span>\n    </a>\n    {{#allowFavorites}}\n    <div id=\"floatedCell\">\n      <slick-favorite-button></slick-favorite-button>\n    </div>\n    {{/allowFavorites}}\n  </div>\n</div>\n"},"text-u-image-w-ratings":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #card {\n    font-family: var(--slick-text-under-image-template-font-family, inherit);\n    background: var(--slick-search-panel-background, white);\n    padding: 10px;\n    position: relative;\n    height: 100%;\n  }\n  #imageContainer {\n    border-radius: var(--slick-text-under-image-template-image-radius, 5px);\n    overflow: hidden;\n    width: 100%;\n  }\n  #imagePanel {\n    height: 100%;\n    width: 100%;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n    position: relative;\n    outline: none;\n    box-sizing: border-box;\n    margin: 0;\n    display: block;\n    overflow: hidden;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    margin: 8px 0 0;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    line-height: 1.5;\n    height: 3em;\n  }\n  #floatedCell {\n    position: absolute;\n    right: 0;\n    bottom: 100%;\n    display: block;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #imagePanel:focus slick-image {\n    transform: scale(1.05);\n  }\n  slick-favorite-button {\n    border-radius: 20px 0 0 0;\n    cursor: initial;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    background: var(--slick-search-panel-background, rgba(255,255,255,1));\n    height: 30px;\n  }\n  slick-image {\n    height: 100%;\n    transition: transform 0.3s ease;\n  }\n  #textPanel {\n    position: relative;\n    font-size: var(--slick-text-under-image-template-title-font-size, 14px);\n    height: calc(4.5em + 10px);\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  #ratingPanel {\n    margin-top: 5px;\n    font-size: 12px;\n    color: #757575;\n    line-height: 16px;\n    --slick-rating-icon-size: 16px;\n  }\n  slick-rating-bar {\n    margin: 0 4px;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    a#name:hover {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #imagePanel:hover slick-image{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #floatedCell {\n    right: initial;\n    left: 0;\n  }\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    border-radius: 0 20px 0 0;\n  }\n</style>\n<div id=\"card\" class=\"vertical\">\n  <div id=\"imageContainer\" class=\"flex\">\n    <a id=\"imagePanel\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n      <slick-image sized src=\"{{imageThumbnail}}\"></slick-image>\n    </a>\n  </div>\n  <div id=\"textPanel\">\n    <a id=\"name\" href=\"{{navigationUrl}}\">\n      <span data-title-html>{{&titleHtml}}</span>\n    </a>\n    \n    {{#hasRating}}\n    <div id=\"ratingPanel\" class=\"horizontal center\">\n      <span>{{recipe.avgRating}}</span>\n      <slick-rating-bar rating=\"{{recipe.avgRating}}\"></slick-rating-bar>\n      <span>({{recipe.reviewCount}})</span>\n    </div>\n    {{/hasRating}}\n    {{^hasRating}}\n    <style>\n    a#name {\n      text-decoration: none;\n      color: inherit;\n      outline: none;\n      margin: 8px 0 0;\n      display: block;\n      word-break: break-word;\n      -webkit-line-clamp: 3;\n      -webkit-box-orient: vertical;\n      display: -webkit-box;\n      -webkit-hyphens: auto;\n      -moz-hyphens: auto;\n      overflow: hidden;\n      hyphens: auto;\n      line-height: 1.5;\n      height: 4.5em;\n    }\n    </style>\n    {{/hasRating}}\n    \n    {{#allowFavorites}}\n    <div id=\"floatedCell\">\n      <slick-favorite-button></slick-favorite-button>\n    </div>\n    {{/allowFavorites}}\n  </div>\n</div>\n"},"text-u-image-details-block":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #card {\n    font-family: var(--slick-text-under-image-template-font-family, inherit);\n    background: var(--slick-search-card-background, white);\n    position: relative;\n    height: 100%;\n    border: var(--slick-text-under-image-template-card-border, 1px solid #dfe1e5);\n    border-radius: var(--slick-text-under-image-template-card-radius, 8px);\n    overflow: hidden;\n  }\n  #imageContainer {\n    width: 100%;\n  }\n  #imagePanel {\n    height: 100%;\n    width: 100%;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n    position: relative;\n    outline: none;\n    box-sizing: border-box;\n    margin: 0;\n    display: block;\n    overflow: hidden;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    font-size: var(--slick-text-under-image-template-title-font-size, 16px);\n    line-height: 20px;\n    height: 40px;\n    overflow: hidden;\n  }\n  #floatedCell {\n    position: absolute;\n    right: 0;\n    bottom: 100%;\n    display: block;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #imagePanel:focus slick-image {\n    transform: scale(1.05);\n  }\n  slick-favorite-button {\n    border-radius: 20px 0 0 0;\n    cursor: initial;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    background: var(--slick-search-card-background, rgba(255,255,255,1));\n    height: 30px;\n    padding-right: 12px;\n  }\n  slick-image {\n    height: 100%;\n    transition: transform 0.3s ease;\n  }\n  #textPanel {\n    padding: 15px;\n    position: relative;\n  }\n  #ratingPanel {\n    margin-top: 5px;\n    font-size: 12px;\n    color: #757575;\n    line-height: 16px;\n    --slick-rating-icon-size: 16px;\n  }\n  slick-rating-bar {\n    margin: 0 4px;\n  }\n  #cookingTime {\n    margin-top: 3px;\n    font-size: 12px;\n    color: #70757a;\n    line-height: 16px;\n  }\n  #description {\n    margin-top: 4px;\n    display: -webkit-box;\n    line-height: 16px;\n    height: calc((2 + var(--slick-template-description-time-buffer, 0) + var(--slick-template-description-rating-buffer, 0)) * 16px);\n    overflow: hidden;\n    color: var(--slick-text-under-image-template-description-color, #70757a);\n    font-size: var(--slick-text-under-image-template-description-font-size, 12px);\n    font-family: var(--slick-text-under-image-template-description-font-family, inherit);\n    word-break: break-word;\n    -webkit-line-clamp: calc(2 + var(--slick-template-description-time-buffer, 0) + var(--slick-template-description-rating-buffer, 0));\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n  }\n  #cardContainer {\n    padding: 10px;\n    height: 100%;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover slick-image{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #floatedCell {\n    right: initial;\n    left: 0;\n  }\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    border-radius: 0 20px 0 0;\n    padding-left: 12px;\n    padding-right: 0;\n  }\n</style>\n<div id=\"cardContainer\">\n  <div id=\"card\" class=\"vertical\">\n    <div id=\"imageContainer\" class=\"flex\">\n      <a id=\"imagePanel\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n        <slick-image sized src=\"{{imageFull}}\"></slick-image>\n      </a>\n    </div>\n    <div id=\"textPanel\">\n      <a id=\"name\" href=\"{{navigationUrl}}\">\n        <span data-title-html>{{&titleHtml}}</span>\n      </a>\n      \n      {{#hasRating}}\n      <div id=\"ratingPanel\" class=\"horizontal center\">\n        <span>{{recipe.avgRating}}</span>\n        <slick-rating-bar rating=\"{{recipe.avgRating}}\"></slick-rating-bar>\n        <span>({{recipe.reviewCount}})</span>\n      </div>\n      {{/hasRating}}\n      \n      {{#cookingTime}}\n      <div id=\"cookingTime\">{{cookingTime}}</div>\n      {{/cookingTime}}\n\n      <div id=\"description\" data-description>{{#description}}{{&description}}{{/description}}</div>\n\n      {{^cookingTime}}\n      <style>\n      :host {\n        --slick-template-description-time-buffer: 1;\n      }\n      </style>\n      <div style=\"height: 3px;\"></div>\n      {{/cookingTime}}\n\n      {{^hasRating}}\n      <style>\n      :host {\n        --slick-template-description-rating-buffer: 1;\n      }\n      </style>\n      <div style=\"height: 5px;\"></div>\n      {{/hasRating}}\n      \n      {{#allowFavorites}}\n      <div id=\"floatedCell\">\n        <slick-favorite-button rightalign></slick-favorite-button>\n      </div>\n      {{/allowFavorites}}\n    </div>\n  </div>\n</div>\n"},"text-u-image-ingredients-block":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #card {\n    font-family: var(--slick-text-under-image-template-font-family, inherit);\n    background: var(--slick-search-card-background, white);\n    margin: 16px 10px;\n    position: relative;\n    height: 100%;\n    border: var(--slick-text-under-image-template-card-border, 1px solid #dfe1e5);\n    border-radius: var(--slick-text-under-image-template-card-radius, 8px);\n    overflow: hidden;\n  }\n  #imageContainer {\n    width: 100%;\n  }\n  #imagePanel {\n    height: 100%;\n    width: 100%;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n    position: relative;\n    outline: none;\n    box-sizing: border-box;\n    margin: 0;\n    display: block;\n    overflow: hidden;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    font-size: var(--slick-text-under-image-template-title-font-size, 16px);\n    line-height: 20px;\n    height: 60px;\n  }\n  #floatedCell {\n    position: absolute;\n    right: 0;\n    bottom: 100%;\n    display: block;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #imagePanel:focus slick-image {\n    transform: scale(1.05);\n  }\n  slick-favorite-button {\n    border-radius: 20px 0 0 0;\n    cursor: initial;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    background: var(--slick-search-card-background, rgba(255,255,255,1));\n    height: 30px;\n    padding-right: 12px;\n  }\n  slick-image {\n    height: 100%;\n    transition: transform 0.3s ease;\n  }\n  #textPanel {\n    padding: 15px;\n    position: relative;\n  }\n  #ratingPanel {\n    margin-top: 5px;\n    font-size: 12px;\n    color: #757575;\n    line-height: 16px;\n    --slick-rating-icon-size: 16px;\n  }\n  slick-rating-bar {\n    margin: 0 4px;\n  }\n  #cookingTime {\n    margin-top: 3px;\n    font-size: 12px;\n    color: #70757a;\n    line-height: 16px;\n  }\n  #sidePanel {\n    width: 45%;\n    border-left: 1px solid #dfe1e5;\n    padding: 0 10px;\n    color: var(--slick-text-under-image-template-description-color, #70757a);\n    font-size: var(--slick-text-under-image-template-description-font-size, 12px);\n    font-family: var(--slick-text-under-image-template-description-font-family, inherit);\n    line-height: 16px;\n    margin-left: 8px;\n    height: 100px;\n  }\n  #sidePanelDetails {\n    word-break: break-word;\n    -webkit-line-clamp: 6;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover slick-image{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #floatedCell {\n    right: initial;\n    left: 0;\n  }\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    border-radius: 0 20px 0 0;\n    padding-left: 12px;\n    padding-right: 0;\n  }\n  :host([dir=\"rtl\"]) #sidePanel {\n    border-right: 1px solid #dfe1e5;\n    margin-right: 8px;\n    margin-left:0;\n    border-left: none;\n  }\n</style>\n<div id=\"card\" class=\"vertical\">\n  <div id=\"imageContainer\" class=\"flex\">\n    <a id=\"imagePanel\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n      <slick-image sized src=\"{{imageFull}}\"></slick-image>\n    </a>\n  </div>\n  <div id=\"textPanel\" class=\"horizontal\">\n    <div class=\"flex\">\n      <a id=\"name\" href=\"{{navigationUrl}}\">\n        <span data-title-html>{{&titleHtml}}</span>\n      </a>\n      \n      {{#hasRating}}\n      <div id=\"ratingPanel\" class=\"horizontal center\">\n        <span>{{recipe.avgRating}}</span>\n        <slick-rating-bar rating=\"{{recipe.avgRating}}\"></slick-rating-bar>\n        <span>({{recipe.reviewCount}})</span>\n      </div>\n      {{/hasRating}}\n      \n      {{#cookingTime}}\n      <div id=\"cookingTime\">{{cookingTime}}</div>\n      {{/cookingTime}}\n    </div>\n    \n    <div id=\"sidePanel\" class=\"horizontal center\">\n      <div id=\"sidePanelDetails\" data-ingredients>{{&ingredientListHtml}}</div>\n    </div>\n\n    {{#allowFavorites}}\n    <div id=\"floatedCell\">\n      <slick-favorite-button rightalign></slick-favorite-button>\n    </div>\n    {{/allowFavorites}}\n  </div>\n</div>\n"},"text-on-image":{"htmlTemplate":"\n<style>\n  a, a:visited, a:hover {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n    height: 100%;\n  }\n  #card {\n    font-family: var(--slick-text-on-image-template-font-family, inherit);\n    box-shadow: var(--slick-text-on-image-template-card-shadow, 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12));\n    box-sizing: border-box;\n    position: relative;\n    border-radius: var(--slick-text-on-image-template-card-radius, 10px);\n    overflow: hidden;\n    height: 100%;\n    width: 100%;\n  }\n  #cardLink {\n    position: relative;\n    box-sizing: border-box;\n  }\n  #cardPanel {\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    box-sizing: border-box;\n  }\n\n  #overlay {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--slick-text-on-image-template-text-bg, linear-gradient(to top, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0)));\n    border-radius: 0 0 var(--slick-text-on-image-template-card-radius, 10px) var(--slick-text-on-image-template-card-radius, 10px);\n    padding: 16px 12px;\n    color: var(--slick-text-on-image-template-font-color, white);\n    font-size: var(--slick-text-on-image-template-font-size, 16px);\n    font-weight: var(--slick-text-on-image-template-font-weight, 400);\n    pointer-events: none;\n  }\n  #pageTitle {\n    line-height: var(--slick-text-on-image-template-line-height, 1.25);\n    -webkit-line-clamp: var(--slick-text-on-image-template-line-count, 3);\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    overflow: hidden;\n  }\n  mark {\n    color: yellow;\n    background: none;\n    font-weight: bold;\n  }\n  slick-image {\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n  }\n\n  @media(hover:hover) {\n    #card {\n      transition: box-shadow 0.3s ease, transform 0.28s ease;\n    }\n    #card:hover {\n      transform: scale(1.03);\n      box-shadow: var(--slick-text-on-image-template-card-hover-shadow, 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12));\n    }\n  }\n</style>\n<div id=\"cardPanel\">\n  <a id=\"cardLink\" href=\"{{navigationUrl}}\">\n    <div id=\"card\">\n      <slick-image sized src=\"{{imageThumbnail}}\"></slick-image>\n      <div id=\"overlay\" class=\"vertical layout\">\n        <div id=\"pageTitle\" data-title-html>{{&titleHtml}}</div>\n      </div>\n    </div>\n  </a>\n</div>\n"},"text-on-image-w-favs":{"htmlTemplate":"\n<style>\n  a, a:visited, a:hover {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n    height: 100%;\n  }\n  #card {\n    font-family: var(--slick-text-on-image-template-font-family, inherit);\n    box-shadow: var(--slick-text-on-image-template-card-shadow, 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12));\n    box-sizing: border-box;\n    position: relative;\n    border-radius: var(--slick-text-on-image-template-card-radius, 10px);\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n  }\n  #cardLink {\n    position: relative;\n    box-sizing: border-box;\n  }\n  #cardPanel {\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    box-sizing: border-box;\n  }\n\n  #overlay {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--slick-text-on-image-template-text-bg, linear-gradient(to top, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0)));\n    border-radius: 0 0 var(--slick-text-on-image-template-card-radius, 10px) var(--slick-text-on-image-template-card-radius, 10px);\n    padding: 16px 12px;\n    color: var(--slick-text-on-image-template-font-color, white);\n    font-size: var(--slick-text-on-image-template-font-size, 16px);\n    font-weight: var(--slick-text-on-image-template-font-weight, 400);\n    pointer-events: none;\n  }\n  #pageTitle {\n    line-height: var(--slick-text-on-image-template-line-height, 1.25);\n    -webkit-line-clamp: var(--slick-text-on-image-template-line-count, 3);\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    overflow: hidden;\n  }\n  slick-favorite-button {\n    cursor: initial;\n    pointer-events: auto;\n    display: inline-block;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    --fab-padding: 7px;\n    --fab-icon-size: 18px;\n    background: var(--slick-text-on-image-template-fav-background, rgba(255,255,255,0.75));\n    border-radius: 50%;\n  }\n  #pageTypeIcon {\n    position: absolute;\n    top: 6px;\n    left: 6px;\n    color: white;\n    opacity: 0.95;\n  }\n  mark {\n    color: yellow;\n    background: none;\n    font-weight: bold;\n  }\n  slick-image {\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n  }\n\n  @media(hover:hover) {\n    #card {\n      transition: box-shadow 0.3s ease, transform 0.28s ease;\n    }\n    #card:hover {\n      transform: scale(1.03);\n      box-shadow: var(--slick-text-on-image-template-card-hover-shadow, 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12));\n    }\n  }\n</style>\n<div id=\"cardPanel\">\n  <a id=\"cardLink\" href=\"{{navigationUrl}}\">\n    <div id=\"card\">\n      <slick-image sized src=\"{{imageThumbnail}}\"></slick-image>\n      <div id=\"overlay\" class=\"vertical layout\">\n        <div id=\"pageTitle\" data-title-html>{{&titleHtml}}</div>\n      </div>\n      {{#allowFavorites}}\n      <slick-favorite-button hidecount></slick-favorite-button>\n      {{/allowFavorites}}\n      {{#showPageType}}\n        {{#isWebstory}}\n        <soso-icon id=\"pageTypeIcon\" icon=\"carousel\" title=\"Web Story\"></soso-icon>\n        {{/isWebstory}}\n      {{/showPageType}}\n    </div>\n  </a>\n</div>\n"},"image-card-details":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  a, a:visited, a:hover {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n  }\n  :host {\n    font-family: var(--slick-image-details-template-font-family, inherit);\n  }\n  #card {\n    box-shadow: var(--slick-image-details-template-image-shadow, 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12));\n    box-sizing: border-box;\n    position: relative;\n    border-radius: var(--slick-image-details-template-image-radius, 10px);\n    overflow: hidden;\n    height: 100%;\n    width: 100%;\n  }\n  #cardLink {\n    position: relative;\n    box-sizing: border-box;\n    width: 40%;\n  }\n  #cardPanel.horizontal {\n    position: relative;\n    height: 100%;\n    padding: 12px 10px;\n    box-sizing: border-box;\n    flex-direction: row-reverse;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  #textPanel {\n    padding: 0 15px 15px;\n    position: relative;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    font-size: 16px;\n    line-height: 20px;\n    overflow: hidden;\n  }\n  slick-multiline {\n    width: 100%;\n    height: 100%;\n    line-height: 16px;\n    color: var(--slick-image-details-template-description-color, #70757a);\n    font-size: 12px;\n  }\n  slick-favorite-button {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    --fab-padding: 6px;\n    margin-left: -8px;\n  }\n  slick-image {\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n  }\n  #ratingPanel {\n    margin-top: 5px;\n    font-size: 12px;\n    color: #000;\n    line-height: 16px;\n    --slick-rating-icon-size: 16px;\n  }\n  slick-rating-bar {\n    margin: 0 4px;\n  }\n  #cookingTime {\n    margin-top: 3px;\n    font-size: 12px;\n    color: #000;\n    line-height: 16px;\n  }\n\n  @media(hover:hover) {\n    #card {\n      transition: box-shadow 0.3s ease, transform 0.28s ease;\n    }\n    #cardPanel:hover #card {\n      transform: scale(1.03);\n      box-shadow: var(--slick-image-details-template-image-shadow, 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12));\n    }\n    #cardPanel:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    margin-right: -8px;\n    margin-left: 0;\n  }\n</style>\n\n<div id=\"cardPanel\" class=\"horizontal\">\n  <div id=\"textPanel\" class=\"flex vertical\">\n    {{#allowFavorites}}\n    <div style=\"height: 38px;\">\n      <slick-favorite-button></slick-favorite-button>  \n    </div>\n    {{/allowFavorites}}\n    <a id=\"name\" href=\"{{navigationUrl}}\">\n      <span data-title-html>{{&titleHtml}}</span>\n    </a>\n\n    {{#hasRating}}\n    <div id=\"ratingPanel\" class=\"horizontal center\">\n      <span>{{recipe.avgRating}}</span>\n      <slick-rating-bar rating=\"{{recipe.avgRating}}\"></slick-rating-bar>\n      <span>({{recipe.reviewCount}})</span>\n    </div>\n    {{/hasRating}}\n    \n    {{#cookingTime}}\n    <div id=\"cookingTime\">{{cookingTime}}</div>\n    {{/cookingTime}}\n\n    <div class=\"flex\" style=\"padding-top: 8px;\">\n      <slick-multiline data-description>{{&description}}</slick-multiline>\n    </div>\n  </div>\n  <a id=\"cardLink\" href=\"{{navigationUrl}}\">\n    <div id=\"card\">\n      <slick-image sized src=\"{{imageThumbnail}}\"></slick-image>\n    </div>\n  </a>\n</div>\n"},"filmstrip":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  :host {\n    font-family: var(--slick-filmstrip-template-font-family, inherit);\n  }\n  a, a:visited, a:hover {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n    height: 100%;\n  }\n  #cardPanel {\n    position: relative;\n    height: 100%;\n    padding: 8px;\n    box-sizing: border-box;\n  }\n  #card {\n    height: 100%;\n    font-size: var(--slick-filmstrip-template-font-size, 13px);\n  }\n  slick-image {\n    width: var(--slick-filmstrip-template-image-width, 33%);\n    border-radius: var(--slick-filmstrip-template-image-radius, 5px);\n    background-color: var(--slick-filmstrip-template-noimage-background, #f0f0f0);\n  }\n  #textPanel {\n    padding: 2px 0 2px 10px;\n  }\n  #card::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 4.55%;\n    width: 100%;\n    height: 90.9%;\n    box-sizing: border-box;\n    background: var(--slick-discovery-highlight-color, #2196f3);\n    opacity: 0;\n    transition: opacity 0.28s ease;\n  }\n  slick-multiline {\n    width: 100%;\n    height: 100%;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n\n  @media(hover:hover) {\n    slick-image {\n      transition: transform 0.3s ease;\n    }\n    #card:hover slick-image {\n      transform: scale(1.1);\n    }\n    #card:hover::before {\n      opacity: 0.05;\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #textPanel {\n    padding: 2px 10px 2px 0;\n  }\n</style>\n\n<div id=\"cardPanel\">\n  <a id=\"cardLink\" href=\"{{navigationUrl}}\">\n    <div id=\"card\" class=\"horizontal\">\n      <slick-image sized src=\"{{imageThumbnail}}\"></slick-image>\n      <div id=\"textPanel\" class=\"flex horizontal\">\n        <slick-multiline class=\"horizontal center\" data-title-html>{{&titleHtml}}</slick-multiline>\n      </div>\n    </div>\n  </a>\n</div>\n"},"text-centric-small":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #cardContainer {\n    padding: 6px;\n    height: 100%;\n  }\n  #card {\n    font-family: var(--slick-text-centric-template-font-family, inherit);\n    height: 100%;\n    border: var(--slick-text-centric-template-card-border, 1px solid #dfe1e5);\n    border-radius: var(--slick-text-centric-template-card-radius, 3px);\n    padding: 12px;\n    background: var(--slick-search-card-background);\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    word-break: break-word;\n    font-size: 15px;\n    line-height: 1.5;\n    max-height: 68px;\n    word-break: break-word;\n    -webkit-line-clamp: 3;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    display: -webkit-box;\n    overflow: hidden;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  slick-favorite-button {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    margin-left: -10px;\n  }\n  a.link {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n  }\n  #sectionPanel {\n    color: #70757a;\n    font-size: 12px;\n    letter-spacing: 0.5px;\n    padding-bottom: 4px;\n    text-transform: uppercase;\n  }\n  #authorPanel {\n    color: #70757a;\n    font-size: 12px;\n    padding-top: 8px;\n    font-style: italic;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    a.link {\n      color: inherit;\n    }\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    a.link:hover {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    margin-right: -10px;\n    margin-left: 0;\n  }\n</style>\n<div id=\"cardContainer\">\n  <div id=\"card\" class=\"vertical\">\n    {{#section}}\n      <div id=\"sectionPanel\">\n        <a class=\"link\" data-section {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n      </div>\n    {{/section}}\n\n    <div>\n      <a id=\"name\" href=\"{{navigationUrl}}\">\n        <span data-title-html>{{&titleHtml}}</span>\n      </a>\n    </div>\n\n    {{#author}}\n      <div id=\"authorPanel\">\n        <a class=\"link\" data-author {{#authorUrl}}href=\"{{authorUrl}}\"{{/authorUrl}}>{{&author}}</a>\n      </div>\n    {{/author}}\n    \n    {{#allowFavorites}}\n    <style>\n    #card {\n      padding-bottom: 4px;\n    }\n    </style>\n    <span class=\"flex\"></span>\n    <div class=\"horizontal center\">\n      <slick-favorite-button></slick-favorite-button>\n    </div>\n    {{/allowFavorites}}\n  </div>\n</div>\n"},"text-centric-wide":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #cardContainer {\n    padding: 10px;\n    height: 100%;\n  }\n  #card {\n    font-family: var(--slick-text-centric-template-font-family, inherit);\n    height: 100%;\n    border: var(--slick-text-centric-template-card-border, 1px solid #dfe1e5);\n    border-radius: var(--slick-text-centric-template-card-radius, 8px);\n    padding: 12px;\n    background: var(--slick-search-card-background);\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    text-decoration: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    outline: none;\n    word-break: break-word;\n    font-size: 18px;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    display: -webkit-box;\n    overflow: hidden;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  slick-favorite-button {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    margin-left: -10px;\n  }\n  #description {\n    margin-top: 8px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #70757a;\n    word-break: break-word;\n    -webkit-line-clamp: 4;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    overflow: hidden;\n    display: -webkit-box;\n    max-height: 84px;\n  }\n  a.link {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #datePanel,\n  #sectionPanel {\n    color: #70757a;\n    font-size: 12px;\n    letter-spacing: 0.5px;\n  }\n  #sectionLink {\n    text-transform: uppercase;\n  }\n  #datePanel {\n    padding-top: 3px;\n  }\n  slick-image {\n    border-radius: var(--slick-text-centric-template-image-radius, 5px);\n    display: block;\n    max-width: 146px;\n    max-height: 146px;\n  }\n  a.imageLink {\n    text-decoration: none;\n    outline: none;\n    border: none;\n    display: block;\n    transition: transform 0.28s ease;\n    position: relative;\n  }\n  #imageContainer {\n    padding-left: 12px;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    a#name {\n      color: inherit;\n    }\n    a.link {\n      color: inherit;\n    }\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover a.link {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    a.imageLink:hover{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    margin-right: -10px;\n    margin-left: 0;\n  }\n  :host([dir=\"rtl\"]) #imageContainer {\n    padding-right: 12px;\n    padding-left: 0;\n  }\n</style>\n<div id=\"cardContainer\">\n  <div id=\"card\" class=\"vertical\">\n    <div id=\"sectionPanel\" class=\"horizontal center\">\n      {{#author}}\n        <a class=\"link\" data-author {{#authorUrl}}href=\"{{authorUrl}}\"{{/authorUrl}}>{{&author}}</a>\n      {{/author}}\n      {{#section}}\n        {{#author}}\n          <span style=\"margin: 0 0.5em;\"> • </span>\n        {{/author}}\n        <a id=\"sectionLink\" class=\"link\" data-section {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n      {{/section}}\n    </div>\n\n    <div id=\"datePanel\" class=\"horizontal center\">\n      {{#published}}\n        <time datetime=\"{{published}}\">{{published}}</time>\n      {{/published}}\n      {{#readingTime}}\n        {{#published}}\n          <span style=\"margin: 0 0.5em;\"> • </span>\n        {{/published}}\n        <span>{{readingTime}}</span>\n      {{/readingTime}}\n    </div>\n    \n    <div class=\"horizontal flex\" style=\"padding-top: 12px;\">\n      <div class=\"vertical flex\">\n        <div>\n          <a id=\"name\" href=\"{{navigationUrl}}\">\n            <span data-title-html>{{&titleHtml}}</span>\n          </a>\n        </div>\n        <div class=\"flex\">\n          <div id=\"description\" class=\"flex\" data-description>{{#description}}{{&description}}{{/description}}</div>\n        </div>\n      </div>\n\n      {{#imageThumbnail}}\n        <div id=\"imageContainer\">\n          <a class=\"imageLink\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n            <slick-image\n            imagewidth=\"{{imageWidth}}\"\n            imageheight=\"{{imageHeight}}\"\n            src=\"{{imageThumbnail}}\"></slick-image>\n          </a>\n        </div>\n      {{/imageThumbnail}}\n    </div>\n    \n    {{#allowFavorites}}\n    <style>\n    #card {\n      padding-bottom: 4px;\n    }\n    </style>\n    <div class=\"horizontal center\">\n      <slick-favorite-button></slick-favorite-button>\n    </div>\n    {{/allowFavorites}}\n  </div>\n</div>\n"},"text-centric-medium":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #cardContainer {\n    padding: 10px;\n    height: 100%;\n  }\n  #card {\n    font-family: var(--slick-text-centric-template-font-family, inherit);\n    height: 100%;\n    border: var(--slick-text-centric-template-card-border, 1px solid #dfe1e5);\n    border-radius: var(--slick-text-centric-template-card-radius, 8px);\n    padding: 12px;\n    background: var(--slick-search-card-background);\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    text-decoration: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    outline: none;\n    word-break: break-word;\n    font-size: 18px;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    display: -webkit-box;\n    overflow: hidden;\n    margin-top: 12px;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  slick-favorite-button {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    margin-left: -10px;\n  }\n  #description {\n    margin-top: 8px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #70757a;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    overflow: hidden;\n    display: -webkit-box;\n    max-height: 42px;\n  }\n  a.link {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #datePanel,\n  #sectionPanel {\n    color: #70757a;\n    font-size: 12px;\n    letter-spacing: 0.5px;\n  }\n  #sectionLink {\n    text-transform: uppercase;\n  }\n  #datePanel {\n    padding-top: 3px;\n  }\n  slick-image {\n    border-radius: var(--slick-text-centric-template-image-radius, 5px);\n    display: block;\n    height: 110px;\n    width: 100%;\n  }\n  a.imageLink {\n    text-decoration: none;\n    outline: none;\n    border: none;\n    display: block;\n    transition: transform 0.28s ease;\n    position: relative;\n  }\n  #imageContainer {\n    padding: 12px 0 0 0;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    a#name {\n      color: inherit;\n    }\n    a.link {\n      color: inherit;\n    }\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover a.link {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    a.imageLink:hover{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    margin-right: -10px;\n    margin-left: 0;\n  }\n</style>\n<div id=\"cardContainer\">\n  <div id=\"card\" class=\"vertical\">\n    <div id=\"sectionPanel\" class=\"horizontal center\">\n      {{#author}}\n        <a class=\"link\" data-author {{#authorUrl}}href=\"{{authorUrl}}\"{{/authorUrl}}>{{&author}}</a>\n      {{/author}}\n      {{#section}}\n        {{#author}}\n          <span style=\"margin: 0 0.5em;\"> • </span>\n        {{/author}}\n        <a id=\"sectionLink\" class=\"link\" data-section {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n      {{/section}}\n    </div>\n\n    <div id=\"datePanel\" class=\"horizontal center\">\n      {{#published}}\n        <time datetime=\"{{published}}\">{{published}}</time>\n      {{/published}}\n      {{#readingTime}}\n        {{#published}}\n          <span style=\"margin: 0 0.5em;\"> • </span>\n        {{/published}}\n        <span>{{readingTime}}</span>\n      {{/readingTime}}\n    </div>\n\n    <div class=\"vertical flex\">\n      {{#imageThumbnail}}\n        <div id=\"imageContainer\">\n          <a class=\"imageLink\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n            <slick-image sized\n            imagewidth=\"{{imageWidth}}\"\n            imageheight=\"{{imageHeight}}\"\n            src=\"{{imageThumbnail}}\"></slick-image>\n          </a>\n        </div>\n      {{/imageThumbnail}}  \n      \n      <div>\n        <a id=\"name\" href=\"{{navigationUrl}}\">\n          <span data-title-html>{{&titleHtml}}</span>\n        </a>\n      </div>\n      \n      <div class=\"flex\">\n        <div id=\"description\" class=\"flex\" data-description>{{#description}}{{&description}}{{/description}}</div>\n      </div>\n    </div>\n    \n    {{#allowFavorites}}\n    <style>\n    #card {\n      padding-bottom: 4px;\n    }\n    </style>\n    <div class=\"horizontal center\">\n      <slick-favorite-button></slick-favorite-button>\n    </div>\n    {{/allowFavorites}}\n  </div>\n</div>\n"},"text-centric-medium-flex":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #cardContainer {\n    padding: 10px;\n    height: 100%;\n  }\n  #card {\n    font-family: var(--slick-text-centric-template-font-family, inherit);\n    height: 100%;\n    border: var(--slick-text-centric-template-card-border, 1px solid #dfe1e5);\n    border-radius: var(--slick-text-centric-template-card-radius, 8px);\n    padding: 12px;\n    background: var(--slick-search-card-background);\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    display: block;\n    text-decoration: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    outline: none;\n    word-break: break-word;\n    font-size: 18px;\n    word-break: break-word;\n    margin-top: 12px;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  slick-favorite-button {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    margin-left: -10px;\n  }\n  #description {\n    margin-top: 8px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #70757a;\n    word-break: break-word;\n  }\n  a.link {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #datePanel,\n  #sectionPanel {\n    color: #70757a;\n    font-size: 12px;\n    letter-spacing: 0.5px;\n  }\n  #sectionLink {\n    text-transform: uppercase;\n  }\n  #datePanel {\n    padding-top: 3px;\n  }\n  slick-image {\n    border-radius: var(--slick-text-centric-template-image-radius, 5px);\n    display: block;\n    height: 110px;\n    width: 100%;\n  }\n  a.imageLink {\n    text-decoration: none;\n    outline: none;\n    border: none;\n    display: block;\n    transition: transform 0.28s ease;\n    position: relative;\n  }\n  #imageContainer {\n    padding: 12px 0 0 0;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    a#name {\n      color: inherit;\n    }\n    a.link {\n      color: inherit;\n    }\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover a.link {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    a.imageLink:hover{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    margin-right: -10px;\n    margin-left: 0;\n  }\n</style>\n<div id=\"cardContainer\">\n  <div id=\"card\" class=\"vertical\">\n    <div id=\"sectionPanel\" class=\"horizontal center\">\n      {{#author}}\n        <a class=\"link\" data-author {{#authorUrl}}href=\"{{authorUrl}}\"{{/authorUrl}}>{{&author}}</a>\n      {{/author}}\n      {{#section}}\n        {{#author}}\n          <span style=\"margin: 0 0.5em;\"> • </span>\n        {{/author}}\n        <a id=\"sectionLink\" data-section class=\"link\" {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n      {{/section}}\n    </div>\n\n    <div id=\"datePanel\" class=\"horizontal center\">\n      {{#published}}\n        <time datetime=\"{{published}}\">{{published}}</time>\n      {{/published}}\n      {{#readingTime}}\n        {{#published}}\n          <span style=\"margin: 0 0.5em;\"> • </span>\n        {{/published}}\n        <span>{{readingTime}}</span>\n      {{/readingTime}}\n    </div>\n\n    <div class=\"vertical flex\">\n      {{#imageThumbnail}}\n        <div id=\"imageContainer\">\n          <a class=\"imageLink\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n            <slick-image sized\n            imagewidth=\"{{imageWidth}}\"\n            imageheight=\"{{imageHeight}}\"\n            src=\"{{imageThumbnail}}\"></slick-image>\n          </a>\n        </div>\n      {{/imageThumbnail}}  \n      \n      <div>\n        <a id=\"name\" href=\"{{navigationUrl}}\">\n          <span data-title-html>{{&titleHtml}}</span>\n        </a>\n      </div>\n      \n      <div class=\"flex\">\n        <div id=\"description\" class=\"flex\" data-description>{{#description}}{{&description}}{{/description}}</div>\n      </div>\n    </div>\n    \n    {{#allowFavorites}}\n    <style>\n    #card {\n      padding-bottom: 4px;\n    }\n    </style>\n    <div class=\"horizontal center\">\n      <slick-favorite-button></slick-favorite-button>\n    </div>\n    {{/allowFavorites}}\n  </div>\n</div>\n"},"video-details":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #cardContainer {\n    padding: 10px;\n    height: 100%;\n  }\n  #card {\n    font-family: var(--slick-video-template-font-family, inherit);\n    height: 100%;;\n    padding-bottom: 8px;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    word-break: break-word;\n    font-size: var(--slick-video-template-title-font-size, 15px);\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    display: -webkit-box;\n    overflow: hidden;\n    margin-top: 4px;\n    line-height: 1.5;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  a.link {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n  }\n  #sectionPanel {\n    color: #70757a;\n    font-size: 12px;\n    letter-spacing: 0.5px;\n  }\n  #sectionLink {\n    text-transform: uppercase;\n  }\n  slick-image {\n    border-radius: var(--slick-video-template-image-radius, 5px);\n    display: block;\n    height: 169px;\n    width: 100%;\n    transition: transform 0.28s ease;\n  }\n  a.imageLink {\n    text-decoration: none;\n    outline: none;\n    border: none;\n    display: block;\n    position: relative;\n    border-radius: var(--slick-video-template-image-radius, 5px);\n    border: var(--slick-video-template-image-border, 1px solid #e5e5e5);\n    overflow: hidden;\n  }\n  #imageContainer {\n    padding: 0 0 10px;\n    position: relative;\n  }\n  #playButton {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: white;\n    background: rgba(0,0,0,0.3);\n    border-radius: 50%;\n    padding: 4px;\n    margin-left: -20px;\n    margin-top: -25px;\n    pointer-events: none;\n  }\n  #playButton soso-icon {\n    width: 32px;\n    height: 32px;\n    display: block;\n  }\n  #description {\n    margin-top: 8px;\n    font-size: var(--slick-video-template-description-font-size, 14px);\n    line-height: 1.5;\n    color: var(--slick-video-details-template-description-color, #70757a);\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    overflow: hidden;\n    display: -webkit-box;\n    max-height: 42px;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover a.link {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    a.imageLink:hover slick-image{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<div id=\"cardContainer\">\n  <div id=\"card\" class=\"vertical\">\n    <div id=\"imageContainer\">\n      <a class=\"imageLink\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n        <slick-image sized\n        imagewidth=\"{{imageWidth}}\"\n        imageheight=\"{{imageHeight}}\"\n        src=\"{{imageFull}}\"></slick-image>\n      </a>\n      <div id=\"playButton\">\n        <soso-icon icon=\"play\"></soso-icon>\n      </div>\n    </div>\n    {{#section}}\n      <div id=\"sectionPanel\" class=\"horizontal center\">\n        <a id=\"sectionLink\" data-section class=\"link\" {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n      </div>\n    {{/section}}\n    <div>\n      <a id=\"name\" href=\"{{navigationUrl}}\" data-title-html>{{&titleHtml}}</a>\n    </div>\n    <div id=\"description\" class=\"flex\" data-description>{{#description}}{{&description}}{{/description}}</div>\n  </div>\n</div>\n"},"video-small":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #cardContainer {\n    padding: 10px;\n    height: 100%;\n  }\n  #card {\n    font-family: var(--slick-video-template-font-family, inherit);\n    height: 100%;;\n    padding-bottom: 8px;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    word-break: break-word;\n    font-size: var(--slick-video-template-title-font-size, 15px);\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    display: -webkit-box;\n    overflow: hidden;\n    margin-top: 4px;\n    line-height: 1.5;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  a.link {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n  }\n  #sectionPanel {\n    color: #70757a;\n    font-size: 12px;\n    letter-spacing: 0.5px;\n  }\n  #sectionLink {\n    text-transform: uppercase;\n  }\n  slick-image {\n    border-radius: var(--slick-video-template-image-radius, 5px);\n    display: block;\n    height: 95px;\n    width: 100%;\n    transition: transform 0.28s ease;\n  }\n  a.imageLink {\n    text-decoration: none;\n    outline: none;\n    border: none;\n    display: block;\n    position: relative;\n    border-radius: var(--slick-video-template-image-radius, 5px);\n    border: var(--slick-video-template-image-border, 1px solid #e5e5e5);\n    overflow: hidden;\n  }\n  #imageContainer {\n    padding: 0 0 10px;\n    position: relative;\n  }\n  #playButton {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    color: white;\n    background: rgba(0,0,0,0.3);\n    border-radius: 50%;\n    padding: 4px;\n    margin-left: -20px;\n    margin-top: -25px;\n    pointer-events: none;\n  }\n  #playButton soso-icon {\n    width: 32px;\n    height: 32px;\n    display: block;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover a.link {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    a.imageLink:hover slick-image{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<div id=\"cardContainer\">\n  <div id=\"card\" class=\"vertical\">\n    <div id=\"imageContainer\">\n      <a class=\"imageLink\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n        <slick-image sized\n        imagewidth=\"{{imageWidth}}\"\n        imageheight=\"{{imageHeight}}\"\n        src=\"{{imageThumbnail}}\"></slick-image>\n      </a>\n      <div id=\"playButton\">\n        <soso-icon icon=\"play\"></soso-icon>\n      </div>\n    </div>\n    {{#section}}\n      <div id=\"sectionPanel\" class=\"horizontal center\">\n        <a id=\"sectionLink\" class=\"link\" data-section {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n      </div>\n    {{/section}}\n    <div>\n      <a id=\"name\" href=\"{{navigationUrl}}\" data-title-html>{{&titleHtml}}</a>\n    </div>\n  </div>\n</div>\n"},"portrait-contain-filmstrip":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  a, a:visited, a:hover {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n  }\n  :host {\n    font-family: var(--slick-portrait-contain-filmstrip-template-font-family, inherit);\n  }\n  #card {\n    box-sizing: border-box;\n    position: relative;\n    border-radius: var(--slick-portrait-contain-filmstrip-template-image-radius, 10px);\n    overflow: hidden;\n    height: 100%;\n    width: 100%;\n  }\n  #cardLink {\n    position: relative;\n    box-sizing: border-box;\n    width: 25%;\n  }\n  #cardPanel.horizontal {\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    box-sizing: border-box;\n    flex-direction: row-reverse;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  #textPanel {\n    padding: 0 0 0 10px;\n    position: relative;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    font-size: 14px;\n    line-height: 1.5;\n    overflow: hidden;\n    height: 42px;\n  }\n  slick-favorite-button {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    --fab-padding: 6px;\n    margin-left: -8px;\n  }\n  slick-image {\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n  }\n\n  @media(hover:hover) {\n    #card {\n      transition: transform 0.28s ease;\n    }\n    #cardPanel:hover #card {\n      transform: scale(1.1);\n    }\n    #cardPanel:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    margin-right: -8px;\n    margin-left: 0;\n  }\n  :host([dir=\"rtl\"]) #textPanel {\n    padding: 0 10px 0 0;\n  }\n</style>\n\n<div id=\"cardPanel\" class=\"horizontal\">\n  <div id=\"textPanel\" class=\"flex vertical\">\n    <span class=\"flex\"></span>\n    <a id=\"name\" href=\"{{navigationUrl}}\">\n      <span data-title-html>{{&titleHtml}}</span>\n    </a>\n    {{#allowFavorites}}\n    <div>\n      <slick-favorite-button></slick-favorite-button>  \n    </div>\n    {{/allowFavorites}}\n    <span class=\"flex\"></span>\n\n  </div>\n  <a id=\"cardLink\" href=\"{{navigationUrl}}\">\n    <div id=\"card\">\n      <slick-image sized contained src=\"{{imageThumbnail}}\"></slick-image>\n    </div>\n  </a>\n</div>\n"},"portrait-contain-details":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  a, a:visited, a:hover {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n  }\n  :host {\n    font-family: var(--slick-portrait-contain-details-template-font-family, inherit);\n  }\n  #card {\n    box-sizing: border-box;\n    position: relative;\n    border-radius: var(--slick-portrait-contain-details-template-image-radius, 10px);\n    overflow: hidden;\n    height: 100%;\n    width: 100%;\n  }\n  #cardLink {\n    position: relative;\n    box-sizing: border-box;\n    width: 30%;\n  }\n  #cardContainer {\n    position: relative;\n    height: 100%;\n    padding: 10px;\n  }\n  #cardPanel.horizontal {\n    position: relative;\n    height: 100%;\n    padding: 12px 10px;\n    box-sizing: border-box;\n    flex-direction: row-reverse;\n    border: var(--slick-portrait-contain-details-template-card-border, 1px solid #dfe1e5);\n    border-radius: var(--slick-portrait-contain-details-template-card-radius, 8px);\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  #textPanel {\n    padding: 0 0 0 15px;\n    position: relative;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    font-size: 16px;\n    line-height: 20px;\n    overflow: hidden;\n    min-height: 40px;\n  }\n  slick-multiline {\n    width: 100%;\n    height: 100%;\n    line-height: 16px;\n    color: var(--slick-portrait-contain-details-template-description-color, #70757a);\n    font-size: 12px;\n  }\n  slick-favorite-button {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    --fab-padding: 6px;\n    margin-left: -8px;\n  }\n  slick-image {\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n  }\n  #ratingPanel {\n    margin-top: 5px;\n    font-size: 12px;\n    color: #000;\n    line-height: 16px;\n    --slick-rating-icon-size: 16px;\n  }\n  slick-rating-bar {\n    margin: 0 4px;\n  }\n  #cookingTime {\n    margin-top: 3px;\n    font-size: 12px;\n    color: #000;\n    line-height: 16px;\n  }\n\n  @media(hover:hover) {\n    #card {\n      transition: transform 0.28s ease;\n    }\n    #cardContainer:hover #card {\n      transform: scale(1.1);\n    }\n    #cardContainer:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    margin-right: -8px;\n    margin-left: 0;\n  }\n  :host([dir=\"rtl\"]) #textPanel {\n    padding: 0 15px 0 0;\n  }\n</style>\n\n<div id=\"cardContainer\">\n  <div id=\"cardPanel\" class=\"horizontal\">\n    <div id=\"textPanel\" class=\"flex vertical\">\n      <a id=\"name\" href=\"{{navigationUrl}}\">\n        <span data-title-html>{{&titleHtml}}</span>\n      </a>\n\n      {{#hasRating}}\n      <div id=\"ratingPanel\" class=\"horizontal center\">\n        <span>{{recipe.avgRating}}</span>\n        <slick-rating-bar rating=\"{{recipe.avgRating}}\"></slick-rating-bar>\n        <span>({{recipe.reviewCount}})</span>\n      </div>\n      {{/hasRating}}\n      \n      {{#cookingTime}}\n      <div id=\"cookingTime\">{{cookingTime}}</div>\n      {{/cookingTime}}\n\n      <div class=\"flex\" style=\"padding: 8px 0;\">\n        <slick-multiline rows=\"3\" data-description>{{&description}}</slick-multiline>\n      </div>\n\n      {{#allowFavorites}}\n      <div>\n        <slick-favorite-button></slick-favorite-button>  \n      </div>\n      {{/allowFavorites}}\n    </div>\n    <a id=\"cardLink\" href=\"{{navigationUrl}}\">\n      <div id=\"card\">\n        <slick-image sized contained src=\"{{imageThumbnail}}\"></slick-image>\n      </div>\n    </a>\n  </div>\n</div>\n"},"landscape-contain":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  a, a:visited, a:hover {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n  }\n  :host {\n    font-family: var(--slick-landscape-contain-template-font-family, inherit);\n  }\n  #card {\n    box-sizing: border-box;\n    position: relative;\n    overflow: hidden;\n    height: 100%;\n    width: 100%;\n  }\n  #cardLink {\n    position: relative;\n    display: block;\n  }\n  #cardPanel {\n    position: relative;\n    height: 100%;\n    padding: 10px;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    font-size: 14px;\n    line-height: 1.5;\n    overflow: hidden;\n    margin-top: 8px;\n  }\n  slick-favorite-button {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    --fab-padding: 6px;\n    margin-left: -8px;\n  }\n  slick-image {\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n  }\n\n  @media(hover:hover) {\n    #card {\n      transition: transform 0.28s ease;\n    }\n    #cardPanel:hover #card {\n      transform: scale(1.1);\n    }\n    #cardPanel:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    margin-right: -8px;\n    margin-left: 0;\n  }\n</style>\n\n<div id=\"cardPanel\" class=\"vertical\">\n  <a id=\"cardLink\" href=\"{{navigationUrl}}\" class=\"flex\">\n    <div id=\"card\">\n      <slick-image sized contained src=\"{{imageThumbnail}}\"></slick-image>\n    </div>\n  </a>\n  <a id=\"name\" href=\"{{navigationUrl}}\">\n    <span data-title-html>{{&titleHtml}}</span>\n  </a>\n  {{#allowFavorites}}\n  <div>\n    <slick-favorite-button></slick-favorite-button>  \n  </div>\n  {{/allowFavorites}}\n</div>\n"},"landscape-cover":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  a, a:visited, a:hover {\n    color: inherit;\n    text-decoration: none;\n    display: block;\n  }\n  :host {\n    font-family: var(--slick-landscape-contain-template-font-family, inherit);\n  }\n  #card {\n    box-sizing: border-box;\n    position: relative;\n    overflow: hidden;\n    height: 100%;\n    width: 100%;\n  }\n  #cardLink {\n    position: relative;\n    display: block;\n  }\n  #cardPanel {\n    position: relative;\n    height: 100%;\n    padding: 12px 10px;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    font-size: 14px;\n    line-height: 1.5;\n    overflow: hidden;\n    margin-top: 8px;\n    height: 42px;\n  }\n  slick-favorite-button {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    --fab-padding: 6px;\n    margin-left: -8px;\n  }\n  slick-image {\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n  }\n\n  @media(hover:hover) {\n    #card {\n      transition: transform 0.28s ease;\n    }\n    #cardPanel:hover #card {\n      transform: scale(1.1);\n    }\n    #cardPanel:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    margin-right: -8px;\n    margin-left: 0;\n  }\n</style>\n\n<div id=\"cardPanel\" class=\"vertical\">\n  <a id=\"cardLink\" href=\"{{navigationUrl}}\" class=\"flex\">\n    <div id=\"card\">\n      <slick-image sized src=\"{{imageThumbnail}}\"></slick-image>\n    </div>\n  </a>\n  <a id=\"name\" href=\"{{navigationUrl}}\">\n    <span data-title-html>{{&titleHtml}}</span>\n  </a>\n  {{#allowFavorites}}\n  <div>\n    <slick-favorite-button></slick-favorite-button>  \n  </div>\n  {{/allowFavorites}}\n</div>\n"},"text-u-image-flex-natural-ratio":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #card {\n    font-family: var(--slick-text-under-image-template-font-family, inherit);\n    background: var(--slick-search-panel-background, white);\n    font-size: 13px;\n    padding: 10px;\n    position: relative;\n  }\n  #imageContainer {\n    border-radius: var(--slick-text-under-image-template-image-radius, 5px);\n    overflow: hidden;\n    width: 100%;\n  }\n  #imagePanel {\n    width: 100%;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n    position: relative;\n    outline: none;\n    box-sizing: border-box;\n    margin: 0;\n    transition: transform 0.3s ease;\n    display: block;\n    overflow: hidden;\n  }\n  #imagePanel img {\n    display: block;\n    width: 100%;\n    height: var(--slick-text-under-image-flex-template-image-height, auto);\n    max-height: var(--slick-text-under-image-flex-template-image-max-height);\n    object-fit: contain;\n  }\n  a#name {\n    text-decoration: none;\n    font-size: var(--slick-text-under-image-template-title-font-size, 14px);\n    color: inherit;\n    outline: none;\n    margin: 8px 0 0;\n    display: block;\n    word-break: break-word;\n  }\n  #floatedCell {\n    float: right;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #imagePanel:focus {\n    transform: scale(1.05);\n  }\n  slick-favorite-button {\n    border-radius: 20px 0 0 0;\n    margin-top: -30px;\n    cursor: initial;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    background: var(--slick-search-panel-background, rgba(255,255,255,1));\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    a#name:hover {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #imagePanel:hover{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #floatedCell {\n    float: left;\n  }\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    border-radius: 0 20px 0 0;\n  }\n</style>\n<div id=\"card\" class=\"vertical\">\n  <div id=\"imageContainer\">\n    <a id=\"imagePanel\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n      <img src=\"{{imageThumbnail}}\" loading=\"lazy\" width=\"{{imageWidth}}\" width=\"{{imageHeight}}\">\n    </a>\n  </div>\n  <div style=\"position: relative;\">\n    <a id=\"name\" href=\"{{navigationUrl}}\">\n      {{#allowFavorites}}\n      <div id=\"floatedCell\">\n        <slick-favorite-button rightalign></slick-favorite-button>\n      </div>\n      {{/allowFavorites}}\n      <span data-title-html>{{&titleHtml}}</span>\n    </a>\n  </div>\n</div>\n"},"text-u-image-details-flex-natural-ratio":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #card {\n    font-family: var(--slick-text-under-image-template-font-family, inherit);\n    background: var(--slick-search-card-background, white);\n    position: relative;\n    height: 100%;\n    border: var(--slick-text-under-image-template-card-border, 1px solid #dfe1e5);\n    border-radius: var(--slick-text-under-image-template-card-radius, 8px);\n    overflow: hidden;\n  }\n  #imageContainer {\n    width: 100%;\n    overflow: hidden;\n  }\n  #imagePanel {\n    height: 100%;\n    width: 100%;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n    position: relative;\n    outline: none;\n    box-sizing: border-box;\n    margin: 0;\n    display: block;\n    overflow: hidden;\n    transition: transform 0.3s ease;\n  }\n  #imagePanel img {\n    display: block;\n    width: 100%;\n    height: var(--slick-text-under-image-flex-details-template-image-height, auto);\n    max-height: var(--slick-text-under-image-flex-details-template-image-max-height);\n    object-fit: contain;\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    text-decoration: none;\n    color: inherit;\n    outline: none;\n    display: block;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    display: -webkit-box;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    overflow: hidden;\n    hyphens: auto;\n    font-size: var(--slick-text-under-image-template-title-font-size, 16px);\n    line-height: 20px;\n    height: 40px;\n    overflow: hidden;\n  }\n  #floatedCell {\n    position: absolute;\n    right: 0;\n    bottom: 100%;\n    display: block;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #imagePanel:focus {\n    transform: scale(1.05);\n  }\n  slick-favorite-button {\n    border-radius: 20px 0 0 0;\n    cursor: initial;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    background: var(--slick-search-card-background, rgba(255,255,255,1));\n    height: 30px;\n    padding-right: 12px;\n  }\n  #textPanel {\n    padding: 15px;\n    position: relative;\n  }\n  #ratingPanel {\n    margin-top: 5px;\n    font-size: 12px;\n    color: #757575;\n    line-height: 16px;\n    --slick-rating-icon-size: 16px;\n  }\n  slick-rating-bar {\n    margin: 0 4px;\n  }\n  #cookingTime {\n    margin-top: 3px;\n    font-size: 12px;\n    color: #70757a;\n    line-height: 16px;\n  }\n  #description {\n    margin-top: 4px;\n    display: -webkit-box;\n    line-height: 16px;\n    overflow: hidden;\n    color: var(--slick-text-under-image-template-description-color, #70757a);\n    font-size: var(--slick-text-under-image-template-description-font-size, 12px);\n    font-family: var(--slick-text-under-image-template-description-font-family, inherit);\n    word-break: break-word;\n    -webkit-line-clamp: calc(2 + var(--slick-template-description-time-buffer, 0) + var(--slick-template-description-rating-buffer, 0));\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n  }\n  #cardContainer {\n    padding: 10px;\n    height: 100%;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover #imagePanel{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) #floatedCell {\n    right: initial;\n    left: 0;\n  }\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    border-radius: 0 20px 0 0;\n    padding-left: 12px;\n    padding-right: 0;\n  }\n</style>\n<div id=\"cardContainer\">\n  <div id=\"card\" class=\"vertical\">\n    <div id=\"imageContainer\">\n      <a id=\"imagePanel\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n        <img src=\"{{imageFull}}\" loading=\"lazy\" width=\"{{imageWidth}}\" width=\"{{imageHeight}}\">\n      </a>\n    </div>\n    <div id=\"textPanel\">\n      <a id=\"name\" href=\"{{navigationUrl}}\">\n        <span data-title-html>{{&titleHtml}}</span>\n      </a>\n      \n      {{#hasRating}}\n      <div id=\"ratingPanel\" class=\"horizontal center\">\n        <span>{{recipe.avgRating}}</span>\n        <slick-rating-bar rating=\"{{recipe.avgRating}}\"></slick-rating-bar>\n        <span>({{recipe.reviewCount}})</span>\n      </div>\n      {{/hasRating}}\n      \n      {{#cookingTime}}\n      <div id=\"cookingTime\">{{cookingTime}}</div>\n      {{/cookingTime}}\n\n      <div id=\"description\" data-description>{{#description}}{{&description}}{{/description}}</div>\n\n      {{^cookingTime}}\n      <style>\n      :host {\n        --slick-template-description-time-buffer: 1;\n      }\n      </style>\n      <div style=\"height: 3px;\"></div>\n      {{/cookingTime}}\n\n      {{^hasRating}}\n      <style>\n      :host {\n        --slick-template-description-rating-buffer: 1;\n      }\n      </style>\n      <div style=\"height: 5px;\"></div>\n      {{/hasRating}}\n      \n      {{#allowFavorites}}\n      <div id=\"floatedCell\">\n        <slick-favorite-button rightalign></slick-favorite-button>\n      </div>\n      {{/allowFavorites}}\n    </div>\n  </div>\n</div>\n"},"image-in-middle-w-details-block":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  #cardContainer {\n    padding: 10px;\n    height: 100%;\n  }\n  #card {\n    font-family: var(--slick-text-centric-template-font-family, inherit);\n    height: 100%;\n    border: var(--slick-text-centric-template-card-border, 1px solid #dfe1e5);\n    border-radius: var(--slick-text-centric-template-card-radius, 8px);\n    padding: 12px;\n    background: var(--slick-search-card-background);\n  }\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  a#name {\n    text-decoration: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    outline: none;\n    word-break: break-word;\n    font-size: 18px;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    display: -webkit-box;\n    overflow: hidden;\n    margin-top: 8px;\n    line-height: 1.3;\n    max-height: 48px;\n  }\n  a#name:focus {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  slick-favorite-button {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    margin-left: -10px;\n  }\n  #description {\n    margin-top: 6px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #70757a;\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    overflow: hidden;\n    display: -webkit-box;\n    height: 42px;\n  }\n  a.link {\n    text-decoration: none;\n    outline: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #datePanel,\n  #sectionPanel {\n    color: #70757a;\n    font-size: 12px;\n    letter-spacing: 0.5px;\n  }\n  #sectionLink {\n    text-transform: uppercase;\n  }\n  #datePanel {\n    padding-top: 3px;\n  }\n  slick-image {\n    border-radius: var(--slick-text-centric-template-image-radius, 5px);\n    display: block;\n    height: 100%;\n    width: 100%;\n    background-color: transparent;\n  }\n  a.imageLink {\n    text-decoration: none;\n    outline: none;\n    border: none;\n    display: block;\n    transition: transform 0.28s ease;\n    position: relative;\n    height: 100%;\n  }\n  #imageContainer {\n    padding: 8px 0 0 0;\n  }\n</style>\n<style>\n  @media(hover:hover) {\n    a#name {\n      color: inherit;\n    }\n    a.link {\n      color: inherit;\n    }\n    #card:hover a#name {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    #card:hover a.link {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n    a.imageLink:hover{\n      transform: scale(1.05);\n    }\n  }\n</style>\n<style rtl>\n  :host([dir=\"rtl\"]) slick-favorite-button {\n    margin-right: -10px;\n    margin-left: 0;\n  }\n</style>\n<div id=\"cardContainer\">\n  <div id=\"card\" class=\"vertical\">\n    <div id=\"sectionPanel\" class=\"horizontal center\">\n      {{#author}}\n        <a class=\"link\" data-author {{#authorUrl}}href=\"{{authorUrl}}\"{{/authorUrl}}>{{&author}}</a>\n      {{/author}}\n      {{#section}}\n        {{#author}}\n          <span style=\"margin: 0 0.5em;\"> • </span>\n        {{/author}}\n        <a id=\"sectionLink\" class=\"link\" data-section {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n      {{/section}}\n    </div>\n\n    <div id=\"datePanel\" class=\"horizontal center\">\n      {{#published}}\n        <time datetime=\"{{published}}\">{{published}}</time>\n      {{/published}}\n      {{#readingTime}}\n        {{#published}}\n          <span style=\"margin: 0 0.5em;\"> • </span>\n        {{/published}}\n        <span>{{readingTime}}</span>\n      {{/readingTime}}\n    </div>\n\n    <div class=\"vertical flex\">\n      {{#imageFull}}\n        <div id=\"imageContainer\" class=\"flex\">\n          <a class=\"imageLink\" aria-label=\"{{titleText}}\" href=\"{{navigationUrl}}\">\n            <slick-image sized\n            imagewidth=\"{{imageWidth}}\"\n            imageheight=\"{{imageHeight}}\"\n            src=\"{{imageFull}}\"></slick-image>\n          </a>\n        </div>\n      {{/imageFull}}  \n      \n      <div style=\"min-height: 102px;\">\n        <div>\n          <a id=\"name\" href=\"{{navigationUrl}}\">\n            <span data-title-html>{{&titleHtml}}</span>\n          </a>\n        </div>\n        <div>\n          <div id=\"description\" class=\"flex\" data-description>{{#description}}{{&description}}{{/description}}</div>\n        </div>\n      </div>\n    </div>\n    \n    {{#allowFavorites}}\n    <style>\n    #card {\n      padding-bottom: 4px;\n    }\n    </style>\n    <div class=\"horizontal center\">\n      <slick-favorite-button></slick-favorite-button>\n    </div>\n    {{/allowFavorites}}\n  </div>\n</div>\n"},"text-only-flex":{"htmlTemplate":"\n<style>\n  * {box-sizing: border-box;}\n  .horizontal {display: flex; flex-direction: row;}\n  .vertical {display: flex; flex-direction: column;}\n  .center {align-items: center;}\n  .flex {flex: 1;}\n  mark {\n    background: none;\n    color: inherit;\n    font-weight: bold;\n  }\n  #card {\n    padding: 16px 12px;\n    font-family: var(--slick-text-only-template-font-family, inherit);\n    font-weight: var(--slick-text-only-template-font-weight, normal);\n    position: relative;\n  }\n  #card::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    background: var(--slick-discovery-highlight-color, #2196f3);\n    opacity: 0;\n    transition: opacity 0.28s ease;\n    pointer-events: none;\n    border-radius: 4px;\n  }\n  #favPanel {\n    padding: 0 4px 0 8px;\n  }\n  slick-favorite-button {\n    color: var(--slick-discovery-highlight-color, #2196f3);\n  }\n  #textPanel {\n    max-width: var(--slick-text-only-template-max-width, 650px);\n  }\n  #description {\n    font-size: var(--slick-text-only-template-description-size, 14px);\n    line-height: 1.5;\n    color: var(--slick-text-only-template-description-color, rgb(77, 81, 86));\n    word-break: break-word;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    -webkit-hyphens: auto;\n    -moz-hyphens: auto;\n    hyphens: auto;\n    overflow: hidden;\n    display: -webkit-box;\n    max-height: 3em;\n    margin-top: 4px;\n  }\n  a#name {\n    font-size: var(--slick-text-only-template-title-size, 18px);\n    line-height: 1.3;\n    text-decoration: none;\n    border: none;\n    outline: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    overflow: hidden;\n    display: inline-block;\n    text-overflow: ellipsis;\n    max-width: 100%;\n    white-space: nowrap;\n  }\n  #sectionLink {\n    text-transform: uppercase;\n  }\n  a.link {\n    text-decoration: none;\n    color: var(--slick-discovery-highlight-color, #2196f3);\n    outline: none;\n    font-size: 12px;\n    letter-spacing: 0.5px;\n    line-height: 1.5;\n    display: block;\n    margin-top: 6px;\n    font-weight: 500;\n  }\n  time {\n    color: #70757A;\n  }\n</style>\n<style>\n  @media(max-width: 750px) {\n    #favPanel {\n      padding: 0;\n    }\n    a#name {\n      white-space: initial;\n      word-break: break-word;\n      -webkit-line-clamp: 1;\n      -webkit-box-orient: vertical;\n      -webkit-hyphens: auto;\n      -moz-hyphens: auto;\n      hyphens: auto;\n      overflow: hidden;\n      display: -webkit-box;\n      max-height: 1.3em;\n    }\n  }\n  @media(hover:hover) {\n    #card:hover::before {\n      opacity: 0.05;\n    }\n    a#name {\n      color: var(--slick-text-only-template-title-color, #000);\n    }\n    #card:hover a#name {\n      color: var(--slick-text-only-template-title-hover-color, var(--slick-discovery-highlight-color, #2196f3));\n    }\n    a.link {\n      color: #70757A;\n    }\n    a.link:hover {\n      color: var(--slick-discovery-highlight-color, #2196f3);\n    }\n  }\n</style>\n<style rtl>\n</style>\n<div id=\"card\" class=\"horizontal center\">\n  <div class=\"flex\">\n    <div id=\"textPanel\" class=\"vertical\">\n      <div>\n        <a id=\"name\" href=\"{{navigationUrl}}\">\n          <span data-title-html>{{&titleHtml}}</span>\n        </a>\n      </div>\n      \n      <div id=\"description\">\n        {{#published}}<time datetime=\"{{published}}\">{{published}} — </time>{{/published}}\n        <span data-description>{{#description}}{{&description}}{{/description}}</span>\n      </div>\n\n      <div class=\"horizontal center\">\n        {{#section}}\n        <a id=\"sectionLink\" class=\"link\" data-section {{#sectionUrl}}href=\"{{sectionUrl}}\"{{/sectionUrl}}>{{&section}}</a>\n        {{/section}}\n        \n        {{#author}}\n          {{#section}}\n          <span style=\"margin: 6px 0.5em 0;color: #70757A;font-size: 12px;\"> • </span>\n          {{/section}}\n        <a class=\"link\" data-author {{#authorUrl}}href=\"{{authorUrl}}\"{{/authorUrl}}>{{&author}}</a>\n        {{/author}}\n      </div>\n    </div>\n  </div>\n\n  {{#allowFavorites}}\n    <div id=\"favPanel\">\n      <slick-favorite-button></slick-favorite-button>\n    </div>\n  {{/allowFavorites}}\n</div>\n"},"ad-img-c":{"htmlTemplate":"\n<style>\n    .zoom {\n      transition: transform .2s; /* Animation */\n    }\n    .zoom:hover {\n      transform: scale(1.05); \n    }\n</style>\n<div class=\"slick-ad-img-c\" style=\"text-align:center;padding:40px 0;\">\n  <a href=\"{{url}}\" target=\"_blank\"><img class=\"zoom\" style=\"width:80%;max-width:{{imageWidth}}px;height:auto;box-shadow:0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);\" src=\"{{imageFull}}\" alt=\"{{titleText}}\"></a>\n</div>"}}}