/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */
.wp-block-cgb-block-ooh-ktpacer-featured-product {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  margin: 3.8rem auto;
  overflow: hidden;
  width: 100%;
  -webkit-box-shadow: 0 0 56px 2px rgba(0, 0, 0, 0.13);
          box-shadow: 0 0 56px 2px rgba(0, 0, 0, 0.13); }
  @media (min-width: 1024px) {
    .wp-block-cgb-block-ooh-ktpacer-featured-product {
      -ms-flex-flow: nowrap;
          flex-flow: nowrap; } }
  .wp-block-cgb-block-ooh-ktpacer-featured-product .content {
    background: #00467E;
    color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex: 1 auto;
        flex: 1 auto;
    -ms-flex-pack: center;
        justify-content: center;
    padding: 1.5em 0;
    width: 100%;
    position: relative; }
    @media (min-width: 1024px) {
      .wp-block-cgb-block-ooh-ktpacer-featured-product .content {
        width: 530px; } }
    .wp-block-cgb-block-ooh-ktpacer-featured-product .content::after {
      top: 0;
      right: -5rem; }
    .wp-block-cgb-block-ooh-ktpacer-featured-product .content::after {
      content: "";
      position: absolute;
      border: 0 solid transparent;
      -webkit-transform: rotate(360deg);
      z-index: 1; }
    .wp-block-cgb-block-ooh-ktpacer-featured-product .content::after {
      right: -400px; }
    .wp-block-cgb-block-ooh-ktpacer-featured-product .content::after {
      border-left-color: #00467E;
      border-left-width: 400px;
      border-bottom-width: 100vh; }
    .wp-block-cgb-block-ooh-ktpacer-featured-product .content:after {
      bottom: 0;
      left: 100%;
      top: initial;
      right: initial;
      z-index: 1; }
    .wp-block-cgb-block-ooh-ktpacer-featured-product .content h1,
    .wp-block-cgb-block-ooh-ktpacer-featured-product .content h2,
    .wp-block-cgb-block-ooh-ktpacer-featured-product .content h3,
    .wp-block-cgb-block-ooh-ktpacer-featured-product .content h4,
    .wp-block-cgb-block-ooh-ktpacer-featured-product .content h5,
    .wp-block-cgb-block-ooh-ktpacer-featured-product .content h6 {
      color: inherit; }
    .wp-block-cgb-block-ooh-ktpacer-featured-product .content .container {
      position: relative;
      z-index: 5; }
      .wp-block-cgb-block-ooh-ktpacer-featured-product .content .container > * + * {
        margin-top: 1.5em; }
  .wp-block-cgb-block-ooh-ktpacer-featured-product .star-wrapper {
    display: none;
    height: 100%;
    position: absolute;
    right: -100px;
    bottom: -0;
    z-index: 3;
    pointer-events: none; }
    @media (min-width: 1024px) {
      .wp-block-cgb-block-ooh-ktpacer-featured-product .star-wrapper {
        display: block; } }
    .wp-block-cgb-block-ooh-ktpacer-featured-product .star-wrapper svg {
      height: 100%;
      width: auto; }
  .wp-block-cgb-block-ooh-ktpacer-featured-product .image-wrapper {
    -ms-flex: 1 600px;
        flex: 1 600px;
    width: 100%;
    position: relative;
    z-index: 4; }
    @media (min-width: 1024px) {
      .wp-block-cgb-block-ooh-ktpacer-featured-product .image-wrapper {
        min-height: 40rem; }
        .wp-block-cgb-block-ooh-ktpacer-featured-product .image-wrapper .image {
          height: 120%;
          left: -5rem;
          max-width: initial;
          position: absolute;
          top: 50%;
          -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
                  transform: translateY(-50%);
          width: auto;
          z-index: 5; } }