
html, body {
    padding: 0;
    margin: 0;
    background-color: #f5f7f8;
}
.zilter-divider-line {
    height: 1px;
    align-self: stretch;
    flex-grow: 0;
    transform: rotate(-360deg);
    opacity: 0.3;
    background-color: rgba(0, 43, 73, 0.24);
  }
.zilter-widget-demo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 48px;
    padding: 72px;
    background-color: #f5f7f8;
    max-width: 1134px;
    margin: 0 auto;
}
.zilter-widget-demo .frame-tile-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.zilter-widget-demo .frame-tile {
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
    flex-wrap: wrap;
}
.zilter-widget-demo .frame-tile .first-frame {
    padding: 0;
    border-radius: 6px;
    width: 240px;
    height: 480px;
}
.zilter-widget-demo .frame-tile .second-frame .second-frame-first {
    padding: 0;
    border-radius: 6px;
    width: 240px;
    height: 240px;
    margin-bottom: 12px;
}
.zilter-widget-demo .frame-tile .second-frame .second-frame-second {
    padding: 0;
    border-radius: 6px;
    width: 240px;
    height: 480px;
}
.zilter-widget-demo .frame-tile .third-frame .third-frame-first {
    padding: 0;
    border-radius: 6px;
    width: 480px;
    height: 240px;
    margin-bottom: 12px;
}
.zilter-widget-demo .frame-tile .third-frame .third-frame-second {
    padding: 0;
    border-radius: 6px;
    width: 360px;
    height: 240px;
}
.zilter-widget-demo .frame-slider {
    height: 394px;
}