:root {
    --sk-body: #fff;
    --sk-on-body: #000;
    --sk-header: #fff;
    --sk-on-header: #141413;
    --sk-header-accent: #141413;
    --sk-on-header-accent: #fff;
    --sk-offcanvas: #fff;
    --sk-on-offcanvas: #000;
    --sk-on-offcanvas-accent: #bd2c00;
    --sk-border-offcanvas: #ddd;
    --sk-footer: #f6f5f3;
    --sk-on-footer: #141413;
    --sk-on-footer-accent: #bd2c00;
    --sk-outline-footer: #141413;
    --sk-search: #f1f1f1;
    --sk-on-search: #0b0a0a;
    --sk-outline-search: rgba(0, 0, 0, 0.09);
    --sk-pagination-enabled: #000;
    --sk-on-pagination-enabled: #fff;
    --sk-pagination-disabled: #e9ecef;
    --sk-on-pagination-disabled: #354757;
    --sk-pagination-accent: #bd2c00;
    --sk-on-pagination-accent: #fff;
    --sk-separator: #d9dfe3;
    --sk-on-separator: #141413;
    --sk-separator-link: #141413;
    --sk-on-separator-link: #fff;
    --sk-social-item: #000;
    --sk-on-social-item: #fff;
    --sk-hero: #f6f5f3;
    --sk-on-hero: #141413;
    --sk-hero-title: #fff;
    --sk-on-hero-title: #000;
    --sk-hero-action: #d8d4cc;
    --sk-on-hero-action: #000;
    --sk-hero-action-accent: #f3bfaf;
    --sk-on-hero-action-accent: #000;
    --sk-landing: #f6f5f3;
    --sk-on-landing: #000;
    --sk-on-landing-title: #000;
    --sk-on-landing-link: #c64118;
    --sk-on-landing-link-accent: #f5533d;
    --sk-category: #f6f5f3;
    --sk-on-category: #000;
    --sk-entry: #fff;
    --sk-on-entry: #000;
    --sk-entry-title: #000;
    --sk-on-entry-title: #000000;
    --sk-on-entry-link: #394840;
    --sk-on-entry-link-accent: #D54215;
    --sk-preview: #f6f5f3;
    --sk-on-preview: #000;
    --sk-on-preview-title: #000;
    --sk-on-preview-title-accent: #bd2c00;
    --sk-faq: #f8f8f8;
    --sk-on-faq: #3b3c3d;
    --sk-faq-accent: #f4f3f3;
    --sk-on-faq-accent: #000;
    --sk-action: #dee2e7;
    --sk-on-action: #000;
    --sk-action-accent: #f3bfaf;
    --sk-on-action-accent: #000;
    --sk-article: #ffffff;
    --sk-on-article: #000;
    --sk-article-any: #2d5942;
    --sk-on-article-any: #fff;
    --sk-on-article-heading: #000;
    --sk-article-dt: #dfdfdf94;
    --sk-on-article-dt: #2d5942;
    --sk-article-note: #e7efec;
    --sk-on-article-note: #0f2118;
    --sk-on-article-link: #0041af;
    --sk-on-article-link-accent: #f5533d;
    --sk-article-recommendations: #dee2e7;
    --sk-on-article-recommendations: #000;
    --sk-on-article-recommendations-title: #2d5942;
    --sk-author: #f6f5f3;
    --sk-on-author: #000;
    --sk-outline-author: #fff;
    --sk-recipe: #e7efec;
    --sk-on-recipe: #000;
    --sk-on-recipe-title: #394840;
    --sk-on-recipe-highlight: #394840;
    --sk-on-recipe-link: #0c3e5a;
    --sk-on-recipe-link-accent: #D54215;
    --sk-recipe-separator: #abb9b3;
    --sk-on-recipe-separator: #394840;
    --sk-recipe-number: #2E5F48;
    --sk-on-recipe-number: #fff;
    --sk-related-entry: #f6f5f3;
    --sk-on-related-entry: #000;
    --sk-on-related-entry-accent: #D54215;
    --sk-contact: #f6f5f3;
    --sk-on-contact: #000;
    --sk-on-contact-title: #000;
    --sk-on-contact-subtitle: #394840;
    --sk-keypoints-card: #f6f5f3;
    --sk-on-keypoints-card: #000;
    --sk-keypoints-card-svg: #eae8e4;
    --sk-on-keypoints-card-svg: #000;
    --sk-message: #d8d4cc;
    --sk-on-message: #000;
    --sk-on-message-accent: #D54215;
    --sk-chip: #f1f1f1;
    --sk-on-chip: #000;
    --sk-font-family: system-ui, sans-serif;
    --sk-font-size: 1.2rem;
    --sk-line-height: 1.6;
    --sk-icon-dimen: 1em;
    --sk-space: 3.2rem;
    --sk-gap: 1.6rem;
    --sk-spacing: 1rem;
    --sk-breadcrumb-delimiter: " » "
}

.actions {
    margin-top: var(--sk-space);
    width: 100%;
    max-width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: var(--sk-gap)
}

.actions .action {
    display: inline-flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--sk-action);
    color: var(--sk-on-action);
    outline: 1px dashed var(--sk-on-action);
    outline-offset: calc(-1*var(--sk-spacing)/2);
    border-radius: 12px;
    flex: auto;
    justify-content: center;
    font-weight: bold;
    padding: var(--sk-spacing);
    transition: all .4s ease
}

.actions .action:hover {
    background: var(--sk-action-accent);
    color: var(--sk-on-action-accent)
}

.actions .action:not(a):hover {
    background: var(--sk-action);
    color: var(--sk-on-action)
}

.article {
    background: var(--sk-article);
    color: var(--sk-on-article);
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 8px 12px -12px rgba(0, 0, 0, .4)
}

.article .article__wrapper {
    word-break: break-word;
    padding: var(--sk-spacing)
}

.article .article__wrapper>div,
.article .article__wrapper>p,
.article .article__wrapper>details,
.article .article__wrapper>blockquote,
.article .article__wrapper>ol,
.article .article__wrapper>ul,
.article .article__wrapper>dl {
    margin-block-end: var(--sk-gap)
}

.article .article__wrapper>h2 {
    display: flex;
    align-items: stretch;
    position: relative
}

.article .article__wrapper>h2::before {
    border-radius: 2rem;
    content: "";
    width: .7rem;
    min-width: .7rem;
    margin-inline-end: .7rem;
    background: var(--sk-article-any);
    align-self: stretch
}

.article .article__wrapper .ads {
    margin-block: var(--sk-gap)
}

.article .article__wrapper>aside {
    margin-block-end: var(--sk-gap);
    padding: var(--sk-spacing);
    outline: 1px dashed #000;
    outline-offset: calc(-0.7*var(--sk-gap)/2);
    border: 8px solid rgba(0, 0, 0, .16);
    display: flex;
    flex-direction: column;
    gap: var(--sk-spacing)
}

.article .article__wrapper .note {
    background: var(--sk-article-note);
    color: var(--sk-on-article-note);
    border-radius: 12px
}

.article .article__wrapper .recommendations {
    border-radius: 12px;
    background: var(--sk-article-recommendations);
    color: var(--sk-on-article-recommendations)
}

.article .article__wrapper .recommendations .recommendations__item {
    display: flex;
    gap: var(--sk-spacing)
}

.article .article__wrapper .recommendations .recommendations__item .recommendations__item-title {
    font-weight: 900;
    color: var(--sk-on-article-recommendations-title);
    text-transform: capitalize
}

.article .article__wrapper .recommendations .recommendations__item .recommendations__item-img {
    border-radius: 4px;
    border: 1px solid #000;
    width: 100px;
    height: auto
}

.article .article__wrapper .recommendations .recommendations__item .recommendations__item-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.article .article__wrapper>h1,
.article .article__wrapper>h2,
.article .article__wrapper>h3,
.article .article__wrapper>h4,
.article .article__wrapper>h5 {
    margin-block: var(--sk-gap);
    color: var(--sk-on-article-heading)
}

.article .article__wrapper ol,
.article .article__wrapper ul {
    padding-inline-start: 24px
}

.article .article__wrapper dt {
    font-weight: 800;
    text-transform: capitalize;
    color: var(--sk-on-article-dt);
    background: linear-gradient(var(--sk-article-dt), var(--sk-article-dt)) 0 85%/100% 8px no-repeat;
    display: inline
}

.article .article__wrapper dt::marker {
    color: var(--sk-article-any)
}

.article .article__wrapper dd {
    margin-block-end: var(--sk-spacing)
}

.article .article__wrapper ul li::marker {
    color: var(--sk-article-any)
}

.article .article__wrapper ol {
    counter-reset: list-counter;
    list-style-type: none
}

.article .article__wrapper ol>li {
    counter-increment: list-counter;
    position: relative
}

.article .article__wrapper ol>li::before {
    content: counter(list-counter);
    position: absolute;
    left: -30px;
    top: 0px;
    background: var(--sk-article-any);
    color: var(--sk-on-article-any);
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 24px 24px 10px 24px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .4)
}

.article .article__wrapper details summary {
    cursor: pointer;
    font-weight: 500
}

.article .article__wrapper details[open] summary {
    margin-block-end: var(--sk-spacing)
}

.article .article__wrapper a:not(.pin):not(.social__item):not(.recommendations a) {
    color: var(--sk-on-article-link);
    font-weight: 700;
    background-image: linear-gradient(180deg, transparent 90%, var(--sk-on-article-link-accent) 0);
    background-repeat: no-repeat;
    background-size: 0 100%;
    transition: background-size 1s cubic-bezier(0.16, 1, 0.3, 1)
}

.article .article__wrapper a:not(.pin):not(.social__item):not(.recommendations a):hover {
    color: var(--sk-on-article-link-accent);
    background-size: 100% 100%
}

.article figure {
    width: 100%;
    margin: 0;
    text-align: center;
    margin-block-end: var(--sk-gap)
}

.article figure .article__player {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    width: 100%;
    border-radius: 24px
}

.article figure .article__player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.article figure img {
    width: 100%;
    height: auto;
    border-radius: 24px
}

.article figure figcaption {
    padding: calc(var(--sk-spacing)/2);
    color: var(--sk-on-article)
}

.authors {
    margin-block: var(--sk-space)
}

.authors .authors__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sk-gap)
}

@media(max-width: 1024px) {
    .authors .authors__wrapper {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width: 768px) {
    .authors .authors__wrapper {
        grid-template-columns: 1fr
    }
}

.author {
    position: relative;
    color: var(--sk-on-author);
    --sk-diameter-img: 160px
}

.author::after {
    background: var(--sk-author);
    content: "";
    height: calc(100% - var(--sk-diameter-img)/2);
    left: 0;
    position: absolute;
    top: calc(var(--sk-diameter-img)/2);
    width: 100%;
    z-index: -1;
    border-radius: 16px;
    outline: 1px dashed
}

.author .author__img {
    width: var(--sk-diameter-img);
    height: var(--sk-diameter-img);
    position: relative;
    z-index: 1;
    overflow: hidden;
    outline: 1px dashed var(--sk-outline-author);
    outline-offset: calc(-1*var(--sk-spacing)/4);
    border-radius: 50%;
    background: var(--sk-author);
    margin: auto
}

.author .author__img img {
    display: block;
    position: absolute;
    aspect-ratio: 1/1;
    object-fit: cover;
    width: var(--sk-diameter-img);
    height: var(--sk-diameter-img);
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform .3s cubic-bezier(0.5, 1.25, 0.75, 1.25)
}

.author .author__img img:hover {
    transform: scale(1.05)
}

.author .author__title {
    color: var(--sk-on-author);
    font-weight: bold;
    display: block
}

.author .author__body {
    padding: var(--sk-spacing);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sk-spacing);
    align-items: center;
    text-align: center
}

*,
*:before,
*:after {
    box-sizing: border-box
}

* {
    margin: 0
}

body {
    background: var(--sk-body);
    color: var(--sk-on-body);
    font-size: var(--sk-font-size);
    font-weight: normal;
    line-height: var(--sk-line-height);
    font-family: var(--sk-font-family);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

svg:not(:root) {
    overflow: hidden
}

button {
    border: none;
    cursor: pointer;
    user-select: none;
    padding: 0;
    font-family: var(--sk-font-family);
    background: none;
    overflow: hidden
}

a {
    text-decoration: none
}

a:hover {
    outline-width: 0
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--sk-spacing)/4);
    padding: 0;
    position: relative
}

.breadcrumb .breadcrumb__item {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold
}

.breadcrumb .breadcrumb__item:not(:last-child)::after {
    content: var(--sk-breadcrumb-delimiter);
    padding: 0 calc(var(--sk-spacing)/2)
}

.categories {
    margin-block: var(--sk-space)
}

.categories .categories__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sk-gap)
}

@media(max-width: 1024px) {
    .categories .categories__wrapper {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width: 768px) {
    .categories .categories__wrapper {
        grid-template-columns: 1fr
    }
}

.category .category__body {
    overflow: hidden;
    display: block;
    border-radius: 12px;
    backface-visibility: hidden;
    height: 160px;
    position: relative
}

.category .category__body .category__img {
    background-color: var(--sk-category);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center left;
    transition: transform .3s ease
}

.category .category__body .category__img:hover {
    transform: scale(1.05)
}

.category .category__body .category__title {
    font-weight: 900;
    position: absolute;
    bottom: 0px;
    left: var(--sk-spacing);
    color: var(--sk-on-category);
    text-shadow: -1px -1px 0 var(--sk-category), 1px -1px 0 var(--sk-category), -1px 1px 0 var(--sk-category), 1px 1px 0 var(--sk-category)
}

.chips {
    margin-block: var(--sk-space)
}

.chips .chips__wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sk-spacing)
}

.chip {
    border-radius: 60px;
    background: var(--sk-chip);
    color: var(--sk-on-chip);
    font-weight: 500;
    padding: calc(var(--sk-spacing)/2);
    transition: all .3s ease;
    text-align: center;
    justify-content: center;
    box-shadow: 0px 6px 0 var(--sk-on-chip);
    border: 2px solid var(--sk-on-chip);
    display: inline-flex;
    align-items: center;
    gap: var(--sk-spacing)
}

.chip .chip-img {
    background-color: var(--sk-chip);
    object-fit: cover;
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 50%
}

.chip:hover {
    transform: translateY(0.14em);
    box-shadow: 0px 4px 0 var(--sk-on-chip)
}

.container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--sk-spacing)
}

@media(max-width: 728px) {
    .container.pi-sm-none {
        padding-inline: 0
    }
}

.container .container__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--sk-space)
}

.container.container--compact {
    max-width: 920px
}

@media(min-width: 1400px) {
    .container {
        max-width: 1200px
    }
}

@media(min-width: 1600px) {
    .container.container--expanded {
        max-width: calc(1600px - var(--sk-spacing))
    }
}

.contacts {
    margin-block: var(--sk-space)
}

.contacts .contacts__wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--sk-gap)*2)
}

@media(max-width: 1024px) {
    .contacts .contacts__wrapper {
        grid-template-columns: 1fr
    }
}

.contact {
    grid-column: span 1;
    background: var(--sk-contact);
    color: var(--sk-on-contact);
    outline: 1px dashed var(--sk-on-contact);
    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .15);
    border-radius: 40px;
    overflow: hidden;
    padding: var(--sk-gap)
}

.contact .contact__body {
    padding: var(--sk-spacing);
    display: flex;
    flex-direction: column;
    gap: var(--sk-gap)
}

.contact .contact__title {
    font-weight: 700;
    color: var(--sk-on-contact-title);
    display: flex;
    align-items: center
}

.contact .contact__subtitle {
    font-weight: 600;
    color: var(--sk-on-contact-subtitle)
}

.contact ul,
.contact ol,
.contact dl {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    word-break: break-word;
    gap: var(--sk-spacing)
}

.d-block {
    display: block
}

.d-none {
    display: none
}

@media(min-width: 768px) {
    .d-md-block {
        display: block
    }

    .d-md-none {
        display: none
    }
}

@media(min-width: 992px) {
    .d-lg-block {
        display: block
    }

    .d-lg-none {
        display: none
    }
}

@media(min-width: 1200px) {
    .d-xl-block {
        display: block
    }

    .d-xl-none {
        display: none
    }
}

.entries {
    margin-block: var(--sk-space)
}

.entries .entries__wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sk-gap)
}

@media(max-width: 1024px) {
    .entries .entries__wrapper {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width: 768px) {
    .entries .entries__wrapper {
        grid-template-columns: 1fr
    }
}

.entry {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    background: var(--sk-entry);
    color: var(--sk-on-entry);
    border-radius: 24px;
    box-shadow: 0 1px 3px rgba(8, 8, 8, .16);
    overflow: hidden;
    transition: all .3s ease
}

.entry:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, .2)
}

.entry .entry__title {
    color: var(--sk-on-entry-title);
    display: block;
    font-weight: 700
}

.entry .entry__title:hover {
    color: var(--sk-on-entry-link-accent)
}

.entry .entry__img {
    width: 100%;
    height: 240px;
    max-width: 100%;
    overflow: hidden
}

.entry .entry__img img {
    background-color: var(--sk-entry);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center left;
    transition: transform .3s ease
}

.entry .entry__img img:hover {
    transform: scale(1.05)
}

.entry .entry__body {
    flex: 1 1 auto;
    gap: var(--sk-spacing);
    padding: var(--sk-spacing);
    display: flex;
    flex-direction: column
}

.entry .entry__footer {
    padding-inline: var(--sk-spacing);
    padding-bottom: var(--sk-spacing);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sk-spacing)
}

.entry .entry__footer .entry__footer-link {
    color: var(--sk-on-entry-link);
    font-weight: 700
}

.entry .entry__footer .entry__footer-link:hover {
    color: var(--sk-on-entry-link-accent)
}

.faqs {
    margin-block: var(--sk-space);
    display: flex;
    flex-direction: column;
    gap: var(--sk-space)
}

.faqs .faqs__wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--sk-gap)
}

.faq {
    color: var(--sk-on-faq);
    background: var(--sk-faq);
    padding: var(--sk-gap);
    border-radius: 8px;
    outline: 1px dashed var(--sk-on-faq)
}

.faq[open] {
    background: var(--sk-faq-accent);
    color: var(--sk-on-faq-accent);
    box-shadow: 0 8px 12px -12px rgba(0, 0, 0, .4)
}

.faq .faq__question {
    font-weight: 500;
    cursor: pointer
}

.faq .faq__answer {
    margin-top: var(--sk-gap);
    display: flex;
    flex-direction: column;
    gap: var(--sk-gap)
}

.faq .faq__answer ol,
.faq .faq__answer ul,
.faq .faq__answer dl {
    padding-inline-start: 12px
}

.faq .faq__answer dt {
    font-weight: 700
}

.faq .faq__answer dd {
    margin-block-end: calc(var(--sk-spacing)/2)
}

.footer {
    margin-block: var(--sk-space);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sk-gap)
}

.footer .footer__copyright {
    margin-block-start: calc(var(--sk-gap)/2);
    color: var(--sk-on-footer);
    font-weight: 700;
    text-align: center
}

.footer .footer__body {
    background: var(--sk-footer);
    width: 100%;
    max-width: 100%;
    position: relative;
    padding: calc(var(--sk-spacing)*2);
    outline: 1px dashed var(--sk-outline-footer);
    outline-offset: calc(-1*var(--sk-spacing)/2)
}

.footer .footer__body .footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--sk-spacing)/2) var(--sk-spacing);
    padding: 0
}

.footer .footer__body .footer__nav .footer__nav-item {
    list-style: none;
    display: inline-flex
}

.footer .footer__body .footer__nav .footer__nav-item>* {
    color: var(--sk-on-footer);
    font-weight: bold
}

.footer .footer__body .footer__nav .footer__nav-item>*:hover,
.footer .footer__body .footer__nav .footer__nav-item>*.selected {
    color: var(--sk-on-footer-accent)
}

.footer .footer__body .footer__nav .footer__nav-item>*:not(.selected):hover {
    color: var(--sk-on-footer-accent)
}

.header {
    box-shadow: 0px 1px 1px rgba(0, 0, 0, .16);
    background: var(--sk-header);
    width: 100%;
    max-width: 100%;
    position: relative;
    overflow: hidden
}

.header .header__wrapper {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center
}

.header .header__wrapper .header__menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: calc(var(--sk-spacing)/2);
    list-style: none;
    align-items: center
}

@media(max-width: 992px) {
    .header .header__wrapper .header__menu {
        gap: 0
    }
}

.header .header__wrapper .header__menu .header__menu-item {
    align-items: center
}

.header .header__wrapper .header__menu .header__menu-item a,
.header .header__wrapper .header__menu .header__menu-item button {
    color: var(--sk-on-header);
    font-weight: bold;
    position: relative;
    padding-block: 8px;
    padding-inline: 16px;
    border-radius: 32px;
    transition: all .3s ease
}

@media(max-width: 992px) {

    .header .header__wrapper .header__menu .header__menu-item a,
    .header .header__wrapper .header__menu .header__menu-item button {
        padding: calc(var(--sk-spacing)/2)
    }
}

.header .header__wrapper .header__menu .header__menu-item a:hover,
.header .header__wrapper .header__menu .header__menu-item a.selected,
.header .header__wrapper .header__menu .header__menu-item button:hover,
.header .header__wrapper .header__menu .header__menu-item button.selected {
    background: var(--sk-header-accent);
    color: var(--sk-on-header-accent)
}

.header .header__wrapper .header__menu .header__menu-item a:not(.selected):hover,
.header .header__wrapper .header__menu .header__menu-item button:not(.selected):hover {
    transform: scale(1.1);
    z-index: var(--sk-z-index-primary)
}

.header .header__wrapper .header__brand {
    display: flex;
    align-items: center;
    padding-top: calc(var(--sk-spacing)/2);
    padding-bottom: calc(var(--sk-spacing)/2);
    max-width: 100%;
    min-width: 90px;
    height: auto
}

.hero {
    padding-block: var(--sk-space);
    position: relative;
    margin-bottom: var(--sk-space)
}

.hero::before {
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    background: var(--sk-hero);
    height: 100%
}

.hero .hero__wrapper {
    text-align: center;
    max-width: 720px;
    margin-inline: auto
}

@media(max-width: 719px) {
    .hero .hero__wrapper {
        padding-inline: var(--sk-spacing)
    }
}

.hero .hero__title {
    font-family: 'Righteous', cursive; /* Custom font */
    color: var(--sk-on-hero-title);
    text-transform: uppercase;
    font-weight: 900;
    display: inline;
    background: linear-gradient(var(--sk-hero-title), var(--sk-hero-title)) 0 85%/100% 8px no-repeat
}

.hero .hero__slogan {
    font-family: 'Righteous', cursive; /* Custom font */
    margin-top: var(--sk-gap);
    color: var(--sk-on-hero)

}

.hero .hero__actions {
    display: flex;
    flex-direction: row;
    margin-top: var(--sk-gap);
    flex-wrap: wrap;
    justify-content: space-around;
    gap: var(--sk-gap)
}

.hero .hero__action {
    border-radius: 60px;
    background: var(--sk-hero-action);
    color: var(--sk-on-hero-action);
    font-weight: 700;
    padding: var(--sk-spacing) calc(var(--sk-spacing)*2);
    transition: all .2s ease;
    text-align: center;
    display: flex;
    border: 2px solid #000;
    box-shadow: 4px 6px 0 #000;
    flex: auto;
    justify-content: center
}

.hero .hero__action:hover {
    background: var(--sk-hero-action-accent);
    color: var(--sk-on-hero-action-accent)
}

.icon-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.icon {
    display: inline-block;
    width: var(--sk-icon-dimen);
    height: var(--sk-icon-dimen);
    font-size: var(--sk-font-size);
    fill: currentColor;
    flex-shrink: 0
}

.icon.icon--medium {
    width: calc(var(--sk-icon-dimen)*1.5);
    height: calc(var(--sk-icon-dimen)*1.5)
}

.icon.icon--large {
    width: calc(var(--sk-icon-dimen)*3);
    height: calc(var(--sk-icon-dimen)*3)
}

.keypoints {
    margin-block: calc(var(--sk-gap)*2)
}

.keypoints .keypoints__wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    gap: calc(var(--sk-gap)*2);
    padding: 0
}

@media(max-width: 1260px) {
    .keypoints .keypoints__wrapper {
        grid-template-columns: 1fr
    }
}

.keypoints .keypoints__wrapper .keypoints__card {
    background: var(--sk-keypoints-card);
    color: var(--sk-on-keypoints-card);
    display: grid;
    grid-template-columns: 1fr 3fr;
    border-radius: 24px;
    overflow: hidden;
    width: 100%;
    transition: all .3s ease;
    outline: 1px dashed var(--sk-on-contact);
    outline-offset: calc(-1*var(--sk-spacing)/2);
    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, .15)
}

@media(min-width: 1261px) {
    .keypoints .keypoints__wrapper .keypoints__card:nth-child(odd) {
        grid-column: 1/span 10
    }

    .keypoints .keypoints__wrapper .keypoints__card:nth-child(even) {
        grid-column: 3/span 10
    }
}

@media(max-width: 1260px) {
    .keypoints .keypoints__wrapper .keypoints__card {
        grid-column: 1
    }
}

@media(max-width: 728px) {
    .keypoints .keypoints__wrapper .keypoints__card {
        display: flex;
        flex-direction: column
    }
}

.keypoints .keypoints__wrapper .keypoints__card .keypoints__card-svg {
    padding: var(--sk-gap);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sk-keypoints-card-svg)
}

.keypoints .keypoints__wrapper .keypoints__card .keypoints__card-svg svg {
    max-width: 100%;
    height: auto;
    width: 100%;
    color: var(--sk-on-keypoints-card-svg);
    fill: var(--sk-on-keypoints-card-svg)
}

@media(max-width: 1260px) {
    .keypoints .keypoints__wrapper .keypoints__card .keypoints__card-svg svg {
        width: 60%
    }
}

.keypoints .keypoints__wrapper .keypoints__card .keypoints__card-content {
    padding: var(--sk-gap);
    gap: var(--sk-spacing);
    display: flex;
    flex-direction: column
}

.keypoints .keypoints__wrapper .keypoints__card .keypoints__card-content ol,
.keypoints .keypoints__wrapper .keypoints__card .keypoints__card-content ul {
    padding-inline-start: 24px
}

.landing {
    color: var(--sk-on-landing);
    position: relative
}

.landing::before {
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    background: var(--sk-landing);
    height: 100%
}

.landing .landing__wrapper {
    padding-block: var(--sk-space);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sk-gap)
}

.landing .landing__wrapper:not(:has(.landing__media)) {
    grid-template-columns: 1fr
}

.landing .landing__wrapper .landing__media {
    display: flex;
    justify-content: end;
    align-items: center
}

.landing .landing__wrapper .landing__media img {
    aspect-ratio: 1/1;
    height: auto;
    object-fit: cover;
    width: 100%;
    max-width: 300px;
    background-color: var(--sk-landing);
    border: 8px solid rgba(0, 0, 0, .1490196078);
    border-radius: 54% 46% 46% 54%/58% 56% 44% 42%;
    outline: 1px dashed
}

.landing .landing__wrapper .landing__media svg {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(10px 30px 20px rgba(80, 80, 80, 0.6078431373))
}

.landing .landing__wrapper .landing__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sk-gap);
    grid-column: span 2
}

.landing .landing__wrapper .landing__content .landing__title {
    color: var(--sk-on-landing-title)
}

.landing .landing__wrapper .landing__content a {
    color: var(--sk-on-landing-link);
    font-weight: 700
}

.landing .landing__wrapper .landing__content a:hover {
    color: var(--sk-on-landing-link-accent)
}

@media(max-width: 1024px) {
    .landing .landing__wrapper {
        grid-template-columns: 1fr
    }

    .landing .landing__wrapper .landing__content {
        grid-column: span 1
    }

    .landing .landing__wrapper .landing__media {
        align-items: center;
        justify-content: center
    }

    .landing .landing__wrapper .landing__media img {
        max-width: 260px
    }
}

.logo {
    white-space: nowrap;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: .3s;
    max-width: 100%;
    width: auto
}

.logo:hover {
    transform: scale(1.03)
}

.message {
    background: var(--sk-message);
    padding: calc(var(--sk-spacing)/1.4) var(--sk-spacing);
    text-align: center
}

.message .message__content {
    color: var(--sk-on-message);
    font-weight: 800;
    transition: all .4s ease
}

.message .message__content:is(a):hover {
    color: var(--sk-on-message-accent)
}

.meta {
    display: flex;
    align-items: center;
    gap: var(--sk-spacing)
}

.meta .meta__img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    object-fit: cover;
    display: block
}

.meta .meta__content {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.offcanvas {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--sk-offcanvas);
    transition: left .3s ease, right .3s ease;
    z-index: 9999;
    overflow-y: auto
}

.offcanvas.offcanvas--open {
    left: 0
}

.offcanvas.offcanvas--close {
    left: -100%
}

.offcanvas .offcanvas__menu {
    list-style: none;
    padding: 0;
    margin-top: calc(var(--sk-icon-dimen)*1.5 + var(--sk-spacing)/2)
}

.offcanvas .offcanvas__menu .offcanvas__menu-item {
    border-bottom: 1px solid var(--sk-border-offcanvas)
}

.offcanvas .offcanvas__menu .offcanvas__menu-item a {
    padding: var(--sk-spacing);
    font-weight: 600;
    color: var(--sk-on-offcanvas);
    transition: all .3s ease;
    cursor: pointer
}

.offcanvas .offcanvas__menu .offcanvas__menu-item.selected a {
    color: var(--sk-on-offcanvas-accent)
}

.offcanvas .offcanvas__exit {
    position: absolute;
    top: 0px;
    right: 10px;
    padding: var(--sk-spacing);
    color: var(--sk-on-offcanvas)
}

.offcanvas .offcanvas__exit:hover {
    color: var(--sk-on-offcanvas-accent)
}

html[dir=rtl] .offcanvas {
    left: auto;
    right: -100%
}

html[dir=rtl] .offcanvas.offcanvas--open {
    right: 0
}

html[dir=rtl] .offcanvas.offcanvas--close {
    right: -100%
}

html[dir=rtl] .offcanvas .offcanvas__exit {
    right: auto;
    left: 10px
}

.pagination {
    display: flex;
    justify-content: center
}

.pagination .pagination__wrapper {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: calc(var(--sk-spacing)/2)
}

.pagination .pagination__wrapper .pagination__item {
    display: flex
}

.pagination .pagination__wrapper .pagination__item a {
    display: block;
    padding: 8px 12px;
    background-color: var(--sk-pagination-enabled);
    color: var(--sk-on-pagination-enabled);
    text-decoration: none;
    border-radius: 16px;
    transition: background-color .3s, color .3s
}

.pagination .pagination__wrapper .pagination__item a:hover {
    background-color: var(--sk-pagination-accent);
    color: var(--sk-on-pagination-accent)
}

.pagination .pagination__wrapper .pagination__item.disabled span {
    display: block;
    padding: 8px 12px;
    background-color: var(--sk-pagination-disabled);
    color: var(--sk-on-pagination-disabled);
    border-radius: 16px;
    cursor: not-allowed
}

.pin-wrapper {
    position: relative
}

.pin-wrapper .pin {
    position: absolute;
    height: 34px;
    top: 16px;
    left: 16px;
    background-color: #bd081c;
    color: #fff;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 4px;
    text-decoration: none
}

.previews {
    margin-block: var(--sk-space)
}

.previews .previews__wrapper {
    display: grid;
    gap: var(--sk-gap)
}

.previews.previews--large .previews__wrapper {
    grid-template-columns: repeat(3, 1fr)
}

@media(max-width: 1024px) {
    .previews.previews--large .previews__wrapper {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width: 768px) {
    .previews.previews--large .previews__wrapper {
        grid-template-columns: 1fr
    }
}

.previews.previews--medium .previews__wrapper {
    grid-template-columns: repeat(4, 1fr)
}

@media(max-width: 1024px) {
    .previews.previews--medium .previews__wrapper {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width: 768px) {
    .previews.previews--medium .previews__wrapper {
        grid-template-columns: 1fr
    }
}

.previews.previews--small .previews__wrapper {
    grid-template-columns: repeat(6, 1fr)
}

@media(max-width: 1024px) {
    .previews.previews--small .previews__wrapper {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width: 768px) {
    .previews.previews--small .previews__wrapper {
        grid-template-columns: repeat(2, 1fr)
    }
}

.preview {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--sk-spacing)/2);
    align-items: center;
    overflow: hidden;
    transition: all .3s ease;
    text-align: center
}

.preview .preview__img {
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 14px;
    background-color: var(--sk-preview)
}

.preview .preview__img img {
    background: var(--sk-preview);
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .3s ease
}

.preview .preview__title {
    color: var(--sk-on-preview-title);
    display: block;
    font-weight: 700;
    line-height: 1.4;
    transition: transform .3s ease
}

.preview .preview__content {
    color: var(--sk-on-preview)
}

.preview:hover .preview__img img {
    transform: scale(1.05)
}

.preview:hover .preview__title {
    color: var(--sk-on-preview-title-accent)
}

.recipe {
    background: var(--sk-recipe);
    color: var(--sk-on-recipe);
    border-radius: 40px;
    overflow: hidden;
    padding: var(--sk-gap);
    outline: 1px dashed var(--sk-on-recipe);
    outline-offset: calc(-1*var(--sk-gap)/2)
}

.recipe .recipe__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--sk-gap)
}

.recipe .recipe__title {
    color: var(--sk-on-recipe-title);
    text-shadow: 1px 1px 2px #fff;
    text-align: center
}

.recipe .recipe__highlight {
    color: var(--sk-on-recipe-highlight)
}

.recipe .recipe__times {
    display: flex;
    gap: var(--sk-gap);
    padding-block: var(--sk-gap);
    border-top: 1px solid var(--sk-recipe-separator);
    border-bottom: 1px solid var(--sk-recipe-separator);
    justify-content: space-around
}

.recipe .recipe__times .recipe__times-item {
    display: flex;
    flex-direction: column;
    align-items: center
}

.recipe .recipe__separator {
    display: flex;
    align-items: center;
    flex: 1;
    color: var(--sk-on-recipe-separator);
    text-shadow: 1px 1px 2px #fff
}

.recipe .recipe__separator::after {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background: var(--sk-recipe-separator);
    flex: 1;
    border-radius: 4px;
    margin-left: var(--sk-gap);
    min-width: var(--sk-gap)
}

.recipe .recipe__interact-list {
    display: flex;
    flex-direction: column;
    gap: var(--sk-gap)
}

.recipe .recipe__interact-list img {
    width: 100%;
    height: auto;
    filter: grayscale(10%);
    border-radius: 40px;
    transition: filter .4s ease
}

.recipe .recipe__interact-list img.selected {
    filter: grayscale(90%)
}

.recipe .recipe__interact-list .recipe__interact-list-content.selected {
    text-decoration: line-through
}

.recipe .recipe__interact-list .recipe__interact-list-number {
    font-weight: bolder;
    background: var(--sk-recipe-number);
    color: var(--sk-on-recipe-number);
    border-radius: 6px;
    text-align: center;
    padding: .3em .6em;
    margin-right: .5em;
    box-shadow: -15px 0 rgba(0, 0, 0, .14), 0 3px 6px rgba(0, 0, 0, .4);
    display: inline-block;
    margin-left: 15px;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: margin-left .4s ease, box-shadow .4s ease
}

.recipe .recipe__interact-list .recipe__interact-list-number.selected {
    margin-left: 0px;
    text-decoration: line-through;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .15)
}

.recipe .recipe__static-list {
    counter-reset: list-counter;
    list-style-type: none
}

.recipe .recipe__static-list li {
    counter-increment: list-counter;
    position: relative;
    margin-bottom: var(--sk-gap)
}

.recipe .recipe__static-list li::before {
    content: counter(list-counter);
    position: absolute;
    left: -30px;
    top: 0px;
    background: var(--sk-recipe-number);
    color: var(--sk-on-recipe-number);
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 24px 24px 10px 24px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .4)
}

.recipe .recipe__static-list li::after {
    content: "";
    border-left: 2px dashed var(--sk-on-recipe);
    position: absolute;
    bottom: 0;
    left: -20px;
    top: 40px;
    text-align: center
}

.recipe .recipe__details .recipe__details-summary {
    cursor: pointer
}

.recipe .recipe__details .recipe__details-content {
    margin-top: var(--sk-spacing)
}

.recipe a {
    color: var(--sk-on-recipe-link);
    font-weight: bold;
    text-shadow: 1px 1px 2px #fff
}

.recipe a:hover {
    color: var(--sk-on-recipe-link-accent)
}

.related_entries {
    display: flex;
    flex-direction: column;
    gap: var(--sk-gap)
}

.related_entries .related_entries__title {
    text-align: center;
    font-weight: 700;
    background-color: var(--sk-related-entry);
    border-radius: 16px;
    color: var(--sk-on-related-entry);
    padding: calc(var(--sk-gap)/2);
    border: 1px dashed var(--sk-on-related-entry)
}

.related_entries .related_entries__item {
    display: flex;
    background-color: var(--sk-related-entry);
    border-radius: 16px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .15);
    overflow: hidden;
    outline: 1px dashed var(--sk-on-related-entry);
    outline-offset: calc(-1*var(--sk-spacing)/2)
}

.related_entries .related_entries__item .related_entries__item-img {
    width: 120px;
    height: 112px;
    object-fit: cover
}

.related_entries .related_entries__item .related_entries__item-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: var(--sk-gap)
}

.related_entries .related_entries__item .related_entries__item-content a {
    color: var(--sk-on-related-entry);
    font-weight: 700;
    line-height: 1.4
}

.related_entries .related_entries__item .related_entries__item-content a:hover {
    color: var(--sk-on-related-entry-accent)
}

.search {
    background: var(--sk-search);
    color: var(--sk-on-search);
    padding: calc(var(--sk-spacing)/2);
    transition: all .3s ease;
    outline: 1px dashed var(--sk-on-separator);
    border-radius: 8px;
    min-height: 86px
}

.search .gsc-search-box {
    margin-bottom: 0 !important
}

.search .gsc-input-box {
    height: 42px !important
}

.search .gsc-search-button {
    height: 42px !important
}

.separator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase
}

.separator .separator__link {
    margin-top: var(--sk-spacing);
    margin-bottom: var(--sk-spacing);
    margin-inline-start: var(--sk-spacing);
    font-weight: bold;
    color: var(--sk-on-separator-link);
    display: inline-flex;
    align-items: center;
    background: var(--sk-separator-link);
    border-radius: 50%;
    padding: calc(var(--sk-spacing)/2)
}

.separator .separator__link svg {
    transition: transform .3s ease
}

.separator .separator__link:hover svg {
    transform: rotate(360deg)
}

.separator .separator__title {
    display: flex;
    align-items: center;
    flex: 1;
    color: var(--sk-on-separator)
}

.separator .separator__title.separator__title--start::after {
    content: "";
    display: block;
    width: 100%;
    height: 6px;
    background: var(--sk-separator);
    flex: 1;
    margin-inline-start: var(--sk-spacing);
    border-radius: 8px;
    min-width: var(--sk-spacing);
    outline: 1px dashed var(--sk-on-separator);
    outline-offset: 0px
}

.separator .separator__title.separator__title--end {
    justify-content: flex-start
}

.separator .separator__title.separator__title--end::before {
    content: "";
    display: block;
    width: 100%;
    height: 6px;
    background: var(--sk-separator);
    flex: 1;
    margin-inline-end: var(--sk-spacing);
    border-radius: 8px;
    min-width: var(--sk-spacing);
    outline: 1px dashed var(--sk-on-separator);
    outline-offset: 0px
}

.separator .separator__title.separator__title--center {
    justify-content: center;
    text-align: center
}

.separator .separator__title.separator__title--center::after,
.separator .separator__title.separator__title--center::before {
    content: "";
    display: block;
    width: 100%;
    height: 6px;
    flex: 1;
    border-radius: 8px;
    background: var(--sk-separator);
    min-width: var(--sk-spacing);
    outline: 1px dashed var(--sk-on-separator);
    outline-offset: 0px
}

.separator .separator__title.separator__title--center::after {
    margin-inline-start: var(--sk-spacing)
}

.separator .separator__title.separator__title--center::before {
    margin-inline-end: var(--sk-spacing)
}
.social__item i {
    color: white; /* This makes all icons white */
}
.social {
    display: flex;
    flex-direction: column;
    gap: var(--sk-spacing);
    text-align: center;
    justify-content: center
}

.social .social__title {
    font-weight: 700
}

.social .social__items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sk-spacing);
    justify-content: center
}

.social .social__item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--sk-social-item);
    text-decoration: none;
    transition: all .4s ease
}

.social .social__item svg {
    color: var(--sk-on-social-item);
    fill: var(--sk-on-social-item);
    width: 20px;
    height: 20px
}

.social .social__item:hover {
    scale: 1.3
}

.template-main-sidebar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--sk-gap);
    margin-block: var(--sk-space)
}

.template-main-sidebar .template-main-sidebar__sidebar {
    grid-column: 5/7;
    display: flex;
    flex-direction: column;
    gap: var(--sk-gap)
}

.template-main-sidebar .template-main-sidebar__main {
    grid-column: 1/5;
    display: flex;
    flex-direction: column;
    gap: var(--sk-space)
}

@media(max-width: 1024px) {
    .template-main-sidebar {
        grid-template-columns: 1fr
    }

    .template-main-sidebar .template-main-sidebar__sidebar {
        grid-column: 1
    }

    .template-main-sidebar .template-main-sidebar__main {
        grid-column: 1
    }
}

.template-main {
    margin-block: var(--sk-space);
    display: flex;
    flex-direction: column;
    gap: var(--sk-gap)
}

.txt-xxxl {
    font-size: calc(var(--sk-font-size)*1.8);
    line-height: 1.2
}

.txt-xxl {
    font-size: calc(var(--sk-font-size)*1.3);
    line-height: 1.2
}

.txt-xl {
    font-size: calc(var(--sk-font-size)*1.1)
}

.txt-l {
    font-size: calc(var(--sk-font-size)*.8)
}

.txt-m {
    font-size: calc(var(--sk-font-size)*.7)
}

.txt-s {
    font-size: calc(var(--sk-font-size)*.6)
}

@media all and (min-width: 992px) {
    .txt-xxxl {
        font-size: calc(var(--sk-font-size)*2.2);
        line-height: 1.2
    }

    .txt-xxl {
        font-size: calc(var(--sk-font-size)*1.7);
        line-height: 1.2
    }

    .txt-xl {
        font-size: calc(var(--sk-font-size)*1.3)
    }

    .txt-l {
        font-size: var(--sk-font-size)
    }

    .txt-m {
        font-size: calc(var(--sk-font-size)*.9)
    }

    .txt-s {
        font-size: calc(var(--sk-font-size)*.7)
    }
}

@media all and (min-width: 1200px) {
    .txt-xxxl {
        font-size: calc(var(--sk-font-size)*2.7)
    }

    .txt-xxl {
        font-size: calc(var(--sk-font-size)*1.9)
    }

    .txt-xl {
        font-size: calc(var(--sk-font-size)*1.4)
    }
}