.not-available-color {
  fill: #ED6861; }

.available-color {
  fill: #18A277; }

.advanced-promo-grid-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 16px; }
  .advanced-promo-grid-container .header .title {
    font-family: ubuntuBold;
    font-size: 24px;
    color: #1A1B21; }
    @media (max-width: 768.98px) {
      .advanced-promo-grid-container .header .title {
        font-size: 18px; } }
  .advanced-promo-grid-container .promo-grid-items-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(0, 1fr))[12];
        grid-template-columns: repeat(12, minmax(0, 1fr));
    -ms-grid-rows: (minmax(0, 1fr))[2];
        grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 16px; }
    @media (max-width: 768.98px) {
      .advanced-promo-grid-container .promo-grid-items-container {
        -ms-grid-rows: auto;
            grid-template-rows: auto;
        gap: 8px; } }
    .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item {
      border-radius: 24px;
      -ms-grid-column: auto !important;
          grid-column-start: auto !important;
      -ms-grid-row: auto !important;
          grid-row-start: auto !important; }
      .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-col-3 {
        -ms-grid-column-span: 3;
        -ms-grid-column: 1;
            grid-column: 1 / span 3; }
      .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-col-6 {
        -ms-grid-column-span: 6;
        -ms-grid-column: 1;
            grid-column: 1 / span 6; }
      .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-col-9 {
        -ms-grid-column-span: 9;
        -ms-grid-column: 1;
            grid-column: 1 / span 9; }
      .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-col-12 {
        -ms-grid-column-span: 12;
        -ms-grid-column: 1;
            grid-column: 1 / span 12; }
      .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-row-1 {
        -ms-grid-row-span: 3;
        -ms-grid-row: 1;
            grid-row: 1 / span 3;
        height: 305px;
        max-height: 305px; }
      .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-row-2 {
        -ms-grid-row-span: 6;
        -ms-grid-row: 1;
            grid-row: 1 / span 6;
        height: 626px;
        max-height: 626px; }
      @media (max-width: 768.98px) {
        .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-col-3, .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-col-6, .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-col-9 {
          -ms-grid-column-span: 12;
          -ms-grid-column: 1;
              grid-column: 1 / span 12; }
        .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-row-1 {
          height: unset;
          max-height: unset; } }
  @media (max-width: 768.98px) and (max-width: 768.98px) {
    .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-row-1 .item .image-container img.promo-grid-item-image {
      aspect-ratio: 3 / 2; } }
      @media (max-width: 768.98px) {
        .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-row-2 {
          height: unset;
          max-height: unset; } }
  @media (max-width: 768.98px) and (max-width: 768.98px) {
    .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item.grid-row-2 .item .image-container img.promo-grid-item-image {
      aspect-ratio: 4 / 5; } }
      .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item {
        border-radius: inherit;
        position: relative;
        height: 100%; }
        .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .image-container {
          border-radius: 24px;
          height: inherit; }
          .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .image-container img.promo-grid-item-image {
            border-radius: inherit;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%; }
        .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .content {
          position: absolute;
          background: transparent;
          z-index: 1;
          padding: 32px;
          top: 0;
          height: 100%;
          width: 100%;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-direction: column;
              flex-direction: column; }
          .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .content.top {
            -ms-flex-pack: start;
                justify-content: start; }
          .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .content.middle {
            -ms-flex-pack: center;
                justify-content: center; }
          .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .content.bottom {
            -ms-flex-pack: end;
                justify-content: end; }
          .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .content.left {
            -ms-flex-align: start;
                align-items: start; }
            .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .content.left .title {
              text-align: left; }
          .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .content.center {
            -ms-flex-align: center;
                align-items: center; }
            .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .content.center .title {
              text-align: center; }
          .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .content.right {
            -ms-flex-align: end;
                align-items: end; }
            .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .content.right .title {
              text-align: right; }
          .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .content .title {
            line-height: 1; }
            @media (max-width: 768.98px) {
              .advanced-promo-grid-container .promo-grid-items-container .promo-grid-item .item .content .title {
                font-size: 25px !important; } }