*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
}

:host {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  margin-right: 36px !important;
  margin-bottom: 36px !important;
  display: flex;
  justify-content: center;
  width: auto;
  container: duet-banner-container;
  container-type: inline-size;
}
:host:last-child, :host:last-of-type {
  margin-right: 0 !important;
}
[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
  margin-right: 36px !important;
}

:host(.duet-m-0) {
  margin: 0 !important;
}

.duet-banner {
  display: grid;
  grid-template-rows: min-content 1fr;
  width: 100%;
  height: 100%;
  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-style: normal;
  text-align: left;
  border-radius: 16px;
}
.duet-banner.duet-p-0 {
  padding: 0 !important;
}
.duet-banner.duet-m-0 {
  margin: 0 !important;
}
.duet-banner .visual {
  position: relative;
  display: none;
  overflow: hidden;
}
@container duet-banner-container (min-width: 0) {
  .duet-banner .visual {
    display: block;
  }
}
.duet-banner .visual .image-container {
  position: relative;
  aspect-ratio: 2/1;
  overflow: hidden;
}
.duet-banner .visual .image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.duet-banner .visual .icon {
  position: absolute;
}
.duet-banner .visual .brand-shape {
  position: absolute;
  top: 0;
  left: 72%;
  display: none;
  width: 100%;
  height: 100%;
  mask-image: url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20344%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.72641e-07%2091.1902C0.000476976%2097.9034%200.626077%20104.726%201.92282%20111.592L42.7493%20327.771C43.8045%20333.358%2045.2667%20338.776%2047.0996%20344H160V0H51.1439C19.7799%2019.1253%200.00268143%2053.4178%202.72641e-07%2091.1749C-9.08807e-08%2091.18%20-9.08875e-08%2091.1851%202.72641e-07%2091.1902Z%22%20fill%3D%22%23E6F2F8%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");
  transform: scale(101%);
}
.duet-banner .content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px 28px;
}
.duet-banner .content .description {
  hyphens: auto;
}
.duet-banner .action {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 16px;
}
.duet-banner .visual {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.duet-banner .visual .image-container {
  width: 100%;
  height: auto;
  border-radius: 0;
}
.duet-banner .visual .icon {
  bottom: 30px;
  left: 15px;
}
.duet-banner.duet-theme-turva {
  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.duet-banner.duet-theme-turva .visual .brand-shape {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
@container duet-banner-container (min-width: 486px) {
  .duet-banner.size-medium, .duet-banner.size-large {
    grid-template-rows: none;
    grid-template-columns: 50% 50%;
  }
  .duet-banner.size-medium .visual, .duet-banner.size-large .visual {
    border-top-left-radius: 16px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 16px;
  }
  .duet-banner.size-medium .visual .image-container, .duet-banner.size-large .visual .image-container {
    height: 100%;
  }
  .duet-banner.size-medium .visual .image, .duet-banner.size-large .visual .image {
    width: 100%;
    height: 100%;
  }
  .duet-banner.size-medium .visual .icon, .duet-banner.size-large .visual .icon {
    top: 36px;
    left: 168px;
  }
  .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {
    display: block;
  }
  .duet-banner.size-medium .content, .duet-banner.size-large .content {
    align-items: flex-start;
    justify-content: center;
    padding: 28px 28px 28px 0;
  }
  .duet-banner.size-medium .action, .duet-banner.size-large .action {
    flex-grow: 0;
  }
}
@container duet-banner-container (min-width: 586px) {
  .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {
    left: 80%;
  }
}
@container duet-banner-container (min-width: 900px) {
  .duet-banner.size-large {
    grid-template-rows: none;
    grid-template-columns: 50% 50%;
  }
  .duet-banner.size-large .visual {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
  }
  .duet-banner.size-large .visual .image-container {
    height: 100%;
  }
  .duet-banner.size-large .visual .image {
    width: 100%;
    height: 100%;
  }
  .duet-banner.size-large .visual .icon {
    top: 40px;
    bottom: auto;
    left: 335px;
  }
  .duet-banner.size-large .visual .brand-shape {
    display: block;
  }
  .duet-banner.size-large .content {
    align-items: flex-start;
    justify-content: center;
    padding: 48px 48px 48px 0;
  }
  .duet-banner.size-large .action {
    flex-grow: 0;
  }
}
.duet-banner.no-image {
  display: flex;
  justify-content: center;
  padding: 36px 20px;
}
.duet-banner.no-image .visual {
  display: none;
}
.duet-banner.no-image .content {
  width: 100%;
  max-width: 720px;
  padding: 0;
}
@container duet-banner-container (min-width: 486px) {
  .duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {
    padding: 48px;
  }
}

:host(.duet-theme-turva2) .duet-banner {
  border-radius: 12px;
}
:host(.duet-theme-turva2) .duet-banner .visual .brand-shape {
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22540%22%20height%3D%2258%22%20viewBox%3D%220%200%20540%2058%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M540%2018.0729L540%2057.6749H0L0.000139455%2011.2563C0.000139455%202.85822%208.31858%20-2.59156%2015.3307%201.26796C33.6821%2011.3367%2055.6983%2020.0831%2080.3633%2027.3465C134.438%2043.276%20201.239%2052.0939%20270%2052.0939C338.761%2052.0939%20405.572%2043.276%20459.637%2027.3465C484.302%2020.0742%20506.318%2011.3277%20524.669%201.25902C531.682%20-2.59156%20540%202.85822%20540%2011.2563V18.0729Z%22%20fill%3D%22%23FBEBE1%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  mask-repeat: no-repeat;
  mask-position: bottom;
  mask-size: contain;
  scale: 101%;
}
:host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
@container duet-banner-container (min-width: 486px) {
  :host(.duet-theme-turva2) .duet-banner.size-medium, :host(.duet-theme-turva2) .duet-banner.size-large {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    border-radius: 12px;
  }
  :host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {
    border-top-left-radius: 12px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 12px;
  }
  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image-container, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image-container {
    padding: 20px;
    padding-right: 0;
  }
  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image {
    border-radius: 12px;
  }
  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .brand-shape, :host(.duet-theme-turva2) .duet-banner.size-large .visual .brand-shape {
    display: none;
  }
}