.dui-flag {
  container: dui-flag/inline-size;
  position: relative;
  --dui-color-body: var(--dui-flag-text-color, var(--dui-color-body, #303D4B));
  --dui-color-heading: var(--dui-flag-text-color, var(--dui-color-body, #303D4B));
}
.dui-flag--breakout {
  --dui-color-heading: var(--dui-flag-breakout-text-color, var(--dui-color-white, #ffffff));
  --dui-color-body: var(--dui-flag-breakout-text-color, var(--dui-color-white, #ffffff));
}
.dui-flag--breakout:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: var(--dui-flag-breakout-color, var(--dui-color-background-secondary, #002966));
  z-index: -1;
}
.dui-flag .dui-flag__region--content {
  font-size: 1.125rem;
  padding: 4rem 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.dui-flag .dui-flag__body {
  color: var(--dui-color-body);
}
@container dui-flag (width > 576px) {
  .dui-flag--container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .dui-flag--left .dui-flag__region--content {
    padding: 4rem;
    padding-right: 0;
  }
  .dui-flag--right .dui-flag__region--content {
    padding: 4rem;
    padding-left: 0;
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}
.dui-flag__region {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.dui-flag__region--media {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}
.dui-flag__region--media iframe,
.dui-flag__region--media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}
.dui-flag__region--content {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}