/* Customizable banner - START */
.customizable-banner-wrapper .banner-grid{
  --_grid-gap: calc(var(--_grid-gap-value) * 1px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--_grid-gap, 0px);
}
.customizable-banner-wrapper .banner-grid.grid-ratio-square {
  --_grid-ratio: 1; /* 1:1 */
}
.customizable-banner-wrapper .banner-grid.grid-ratio-portrait {
  --_grid-ratio: 1.25; /* 4:5 */
}
.customizable-banner-wrapper .banner-grid.grid-ratio-landscape {
  --_grid-ratio: 0.8; /* 5:4 */
}
.customizable-banner-wrapper .banner-grid.grid-ratio-wide {
  --_grid-ratio: 0.5625; /* 16:9 */
}
.customizable-banner-wrapper .banner-grid .grid-item{
  --_grid-column-span: var(--_column-span, 1);
  --_grid-row-span: var(--_row-span, 1);
  --_grid-total-column-gap: calc(var(--_grid-gap) * (var(--_grid-column-span) - 1));
  --_grid-total-row-gap: calc(var(--_grid-gap) * (var(--_grid-row-span) - 1));
  --_grid-width-ratio: calc((100% - var(--_grid-total-column-gap)) * var(--_grid-ratio));
  grid-column: span var(--_grid-column-span);
  grid-row: span var(--_grid-row-span);
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  padding-top: calc((var( --_grid-width-ratio) / var(--_grid-column-span)) * var(--_grid-row-span) + var(--_grid-total-row-gap));
}
.customizable-banner-wrapper .image-container, 
.customizable-banner-wrapper .text-container{
  --_block-radius: calc(0.22px * var(--layout-radius));
  border-radius: var(--_block-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: var(--_block-padding, 0px);
  position: absolute;
  top: 0;
  left: 0;
}
.customizable-banner-wrapper .image-container.show-background,
.customizable-banner-wrapper .text-container.secondary-background{
  background-color: rgb(var(--secondary-background));
}
.customizable-banner-wrapper .image-container img,
.customizable-banner-wrapper .image-container svg{
  width: 100%;
  height: 100%;
  border-radius: max(calc(var(--_block-radius) - var(--_block-padding)), calc(0.1px * var(--layout-radius)));
}
.customizable-banner-wrapper .text-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.customizable-banner-wrapper .text-container.text-left{
  align-items: flex-start;
}
.customizable-banner-wrapper .text-container.text-center{
  align-items: center;
}
.customizable-banner-wrapper .text-container.text-right{
  align-items: flex-end;
}
@media(max-width: 991px){
  .customizable-banner-wrapper .banner-grid{
    grid-template-columns: repeat(4, 1fr);
  }
  .customizable-banner-wrapper .banner-grid .grid-item{
    --_grid-column-span: var(--_column-span-tablet, 1);
    --_grid-row-span: var(--_row-span-tablet, 1);
  }
}
@media(max-width: 566px){
  .customizable-banner-wrapper .banner-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .customizable-banner-wrapper .banner-grid .grid-item{
    --_grid-column-span: var(--_column-span-mobile, 1);
    --_grid-row-span: var(--_row-span-mobile, 1);
  }
}
/* Customizable banner - END */