.ly-header-liquid-glass-outer {
    display: block !important;
    backdrop-filter: url(#ly-header-liquid-glass-filter);
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 100px;

    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" rx="0" ry="0" fill="white"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="5" y="5" width="calc(100% - 10px)" height="calc(100% - 10px)" rx="21" ry="21" fill="white"/></svg>');
    mask-composite: exclude;
}

.ly-header-liquid-glass-cover {
    display: block !important;
    backdrop-filter: blur(2px);
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.12);
}

.ly-header-liquid-glass-sharp {
    display: block !important;
    position: absolute;
    inset: 0;
    z-index: 3;

    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 0px 0px rgba(255, 255, 255, 0.6);
    border-radius: 100px;
}

.ly-header-liquid-glass-reflect {
    display: block !important;
    position: absolute;
    inset: 1px;
    z-index: 2;

    box-shadow: inset 2px 2px 6px 2px rgba(255, 255, 255, 0.2), inset -2px -2px 4px -1px rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
}

.ly-banner-icons {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 10vh;
    z-index: 1;
}

.ly-header-icon-wrapper {
    padding: 0 calc(8 * var(--u, 1px));
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(11.5 * var(--u, 1px)) calc(9.5 * var(--u, 1px));
}

.ly-header-icon-item {
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: 100px;
}

.ly-header-icon-item-inner {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u, 1px));
    color: #ffffff;
    font-size: calc(14 * var(--u, 1px));
    font-weight: 500;
    padding: calc(8 * var(--u, 1px)) calc(14 * var(--u, 1px));
    white-space: nowrap;
    border-radius: 100px;
    position: relative;
    z-index: 5;

    .svg-wrapper {
        width: calc(22 * var(--u, 1px));
        height: calc(22 * var(--u, 1px));
    }
}

@media screen and (min-width: 750px) {
    .ly-header-icon-wrapper {
        padding: 0 89px;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .ly-header-icon-item {
        justify-content: center;
    }
}