/**
Include icons in scss/css.
Usage: 
 @include icon(close);
*/
/*
Media query mixin.
Usage: 
@include media($bp-l, min)
*/
/*
Mixin to add loading spinner to button/element.
Usage: 
@include loading()
*/
.menu-promo {
  position: relative;
  color: var(--promo-mobile-font-color, #fff);
}
@media only screen and (min-width: 1160px) {
  .menu-promo {
    color: var(--promo-font-color, #fff);
  }
}
@media only screen and (min-width: 1160px) {
  .menu-promo {
    height: 25.625rem;
  }
  .menu-promo::before {
    float: left;
    padding-top: 133.3333333333%;
    content: "";
  }
  .menu-promo::after {
    display: block;
    content: "";
    clear: both;
  }
}
@media only screen and (max-width: 1159px) {
  .menu-promo {
    width: 15.5rem;
  }
}
.menu-promo media-loader {
  height: 100%;
  width: 100%;
}
@media only screen and (max-width: 1159px) {
  .menu-promo media-loader {
    position: relative;
    height: 15.5rem;
    width: 15.5rem;
  }
  .menu-promo media-loader::before {
    float: left;
    padding-top: 74.5967741935%;
    content: "";
  }
  .menu-promo media-loader::after {
    display: block;
    content: "";
    clear: both;
  }
  .menu-promo media-loader:empty {
    opacity: 1;
  }
}
.menu-promo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (min-width: 1160px) {
  .menu-promo--mobile-only {
    display: none !important;
  }
}

.menu-promo__image {
  display: none;
}
@media only screen and (min-width: 1160px) {
  .menu-promo__image {
    display: block;
  }
  .menu-promo__image::after {
    content: "";
    background: linear-gradient(180deg, transparent 0%, rgb(0 0 0/var(--promo-overlay-opacity, 0.2)) 100%);
    position: absolute;
    inset: 0;
  }
}
.menu-promo__image--mobile {
  display: block !important;
}
@media only screen and (min-width: 1160px) {
  .menu-promo__image--mobile {
    display: none !important;
  }
}

.menu-promo__content {
  max-width: 100%;
  color: var(--promo-mobile-font-color, #fff);
}
@media only screen and (min-width: 1160px) {
  .menu-promo__content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1.5rem;
    color: var(--promo-font-color, #fff);
  }
}
.menu-promo__content span {
  font-size: 1.125rem;
  line-height: 150%;
  font-weight: 600;
  letter-spacing: -0.0125rem;
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
@media (min-width: 992px) {
  .menu-promo__content span {
    font-size: 1.25rem;
  }
}
@media only screen and (max-width: 1159px) {
  .menu-promo__content span {
    margin-top: 0.5rem;
  }
}
.menu-promo__content .secondary-button {
  color: var(--promo-mobile-font-color, #fff);
  font-size: 0.875rem;
}
@media only screen and (min-width: 1160px) {
  .menu-promo__content .secondary-button {
    display: inline-block;
    color: var(--promo-font-color, #fff);
  }
}