@layer windfce_themebanner {
  .frame-type-windfce_themebanner {
    --_container-width: 82.5rem;
    --_container-gutter: 0.75rem;
    --_content-width: min(100%, var(--_container-width));
    --_container-spacing: 5rem;
    --_banner-background: transparent;
    --_card-padding-inline: 3.75rem;
    --_card-padding-block: 3.75rem;
    --_card-max-width: none;
    --_tablet-max-width: 100%;
    --_card-gap: 0.625rem;
    --_card-content-gap: 2.5rem;
    --_image-grid-columns: repeat(8, 1fr);
    --_image-grid-rows: repeat(6, 1fr);
    --_card-grid-area: auto;
    --_card-margin-block-start: var(--_container-spacing);
    --_card-margin-block-end: var(--_container-spacing);
    --_card-margin-inline-start: auto;
    --_card-margin-inline-end: auto;
    --_card-justify-self: stretch;
    --_image-grid-area: auto;
    position: relative;
    isolation: isolate;
    background: var(--_banner-background);
    padding-block: calc(var(--_container-spacing) * 2);
    &.frame-layout-0 {
      --_banner-background: var(--wind-fce-color-primary-light, #eff6ff);
    }
    &.frame-layout-1 {
      --_banner-background: var(--wind-fce-color-accent-light, #ecfdf5);
    }
    &.frame-layout-2 {
      --_banner-background: var(--wind-fce-color-surface, #fff);
    }
    .theme-banner__image-grid {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -1;
      img.theme-banner__bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }
    .theme-banner__inner {
      display: grid;
      grid-template-columns: 1fr minmax(18rem, 0.75fr) minmax(18rem, 0.75fr) 1fr;
      grid-template-rows: repeat(3, auto);
      grid-template-areas: "top-left top top top-right" "left center center right" "bottom-left bottom bottom bottom-right";
      grid-column-gap: 0;
      grid-row-gap: 0;
      width: var(--_content-width);
      padding-inline: var(--_container-gutter);
      margin-inline: auto;
      .theme-banner__card {
        grid-area: var(--_card-grid-area);
        margin-block-start: var(--_card-margin-block-start);
        margin-block-end: var(--_card-margin-block-end);
        margin-inline-start: var(--_card-margin-inline-start);
        margin-inline-end: var(--_card-margin-inline-end);
        padding-block: var(--_card-padding-block);
        padding-inline: var(--_card-padding-inline);
        justify-self: var(--_card-justify-self);
        box-shadow: var(--wind-fce-shadow-large);
        display: flex;
        flex-direction: column;
        gap: var(--_card-gap);
        background: var(--wind-fce-color-surface, #fff);
        width: fit-content;
        max-width: min(100%, var(--_card-max-width));
        &.position-left,
        &.position-right {
          --_card-max-width: 38rem;
        }
        &.position-top-left {
          --_card-grid-area: 1 / 1 / 3 / 4;
          --_card-margin-block-start: var(--_container-spacing);
          --_card-margin-block-end: calc(var(--_container-spacing) * 4);
        }
        &.position-left {
          --_card-grid-area: 2 / 1 / 3 / 3;
          --_card-margin-inline-start: 0;
          --_card-margin-inline-end: auto;
        }
        &.position-bottom-left {
          --_card-grid-area: 3 / 1 / 4 / 3;
          --_card-margin-block-start: calc(var(--_container-spacing) * 4);
          --_card-margin-inline-start: 0;
          --_card-margin-inline-end: auto;
          --_card-justify-self: start;
        }
        &.position-center {
          --_card-grid-area: center;
          --_card-padding-block: 3.125rem;
          --_card-margin-inline-start: auto;
          --_card-margin-inline-end: auto;
          --_card-justify-self: center;
        }
        &.position-right {
          --_card-grid-area: 2 / 3 / 3 / 5;
          --_card-margin-inline-start: auto;
          --_card-margin-inline-end: 0;
        }
        .theme-banner__card-content {
          display: flex;
          flex-direction: column;
          gap: var(--_card-content-gap);
          padding: 0;
        }
      }
    }
    &.image-position-left,
    &.image-position-right {
      .theme-banner__image-grid {
        left: 0;
        right: 0;
        width: var(--_content-width);
        max-width: none;
        padding-inline: var(--_container-gutter);
        margin-inline: auto;
        display: grid;
        grid-template-columns: var(--_image-grid-columns);
        grid-template-rows: var(--_image-grid-rows);
        grid-column-gap: 0;
        grid-row-gap: 0;
        img.theme-banner__bg {
          grid-area: var(--_image-grid-area);
        }
      }
    }
    &.image-position-left {
      --_image-grid-area: 2 / 1 / 6 / 8;
    }
    &.image-position-right {
      --_image-grid-area: 2 / 2 / 6 / 9;
    }
    &.image-position-letterbox {
      padding-block: 0;
      margin-block: calc(var(--_container-spacing) * 2);
      .theme-banner__inner {
        .theme-banner__card {
          --_card-margin-block-start: calc(var(--_container-spacing) * -1);
        }
      }
    }
    &.image-position-full-size {
      .theme-banner__inner {
        .theme-banner__card {
          --_card-margin-block-start: 0;
          --_card-margin-block-end: 0;
        }
        .theme-banner__card.position-bottom-left {
          --_card-margin-block-start: calc(var(--_container-spacing) * 4);
        }
      }
    }
    @media (max-width: 992px) {
      --_container-spacing: 2.5rem;
      --_stacked-block-width: min(100%, var(--_tablet-max-width));
      .theme-banner__image-grid {
        position: absolute;
        inset: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        margin-inline: auto;
        padding: 0;
        img.theme-banner__bg {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }
      }
      .theme-banner__inner {
        display: block;
        padding-inline: calc(var(--_container-gutter) * 3);
      }
      .theme-banner__inner .theme-banner__card {
        width: var(--_stacked-block-width);
        --_card-max-width: none;
        --_card-margin-inline-start: auto;
        --_card-margin-inline-end: auto;
        --_card-margin-block-start: var(--_container-spacing);
        --_card-margin-block-end: var(--_container-spacing);
      }
      .theme-banner__card.position-center {
        --_card-margin-block-start: var(--_container-spacing);
        --_card-margin-block-end: var(--_container-spacing);
      }
      .theme-banner__inner .theme-banner__card.position-top-left,
      .theme-banner__inner .theme-banner__card.position-left,
      .theme-banner__inner .theme-banner__card.position-bottom-left,
      .theme-banner__inner .theme-banner__card.position-center,
      .theme-banner__inner .theme-banner__card.position-right {
        --_card-grid-area: auto;
        --_card-justify-self: stretch;
        --_card-margin-inline-start: auto;
        --_card-margin-inline-end: auto;
      }
      .theme-banner__inner .theme-banner__card.position-left,
      .theme-banner__inner .theme-banner__card.position-right {
        --_card-max-width: none;
      }
      .theme-banner__card.position-bottom-left {
        --_card-margin-block-start: 0;
        --_card-margin-block-end: 0;
      }
      &.image-position-left,
      &.image-position-right {
        .theme-banner__image-grid {
          left: 0;
          right: 0;
          width: 100%;
          max-width: none;
          margin-inline: 0;
          padding: 0;
          display: block;
          grid-template-columns: none;
          grid-template-rows: none;
          grid-column-gap: 0;
          grid-row-gap: 0;
          img.theme-banner__bg {
            grid-area: auto;
          }
        }
      }
      &.image-position-letterbox {
        margin-block: 0;
        padding-block: calc(var(--_container-spacing) * 2);
      }
      &.image-position-letterbox,
      &.image-position-left,
      &.image-position-right,
      &.image-position-full-size {
        .theme-banner__inner {
          .theme-banner__card {
            --_card-margin-block-start: 0;
            --_card-margin-block-end: 0;
          }
          .theme-banner__card.position-bottom-left {
            --_card-margin-block-start: 0;
            --_card-margin-block-end: 0;
          }
        }
      }
    }
    @media (max-width: 576px) {
      --_container-spacing: 1.25rem;
    }
  }
}