html {
  height: 100%;
}

@font-face {
  font-family: Dinner;
  src: url("/assets/fonts/Dinner-957271af.otf") format("opentype");
}
@font-face {
  font-family: HoperBegin;
  src: url("/assets/fonts/HoperBegin-f3b1d876.otf") format("opentype");
}

body#website {
  :root & {
  /* Colors */
  --color-text: #000;
  --color-primary: #000;
  --color-white: #fff;
  --color-black: #222;
  --color-dark-gray: #444;
  --color-medium-gray: #666;
  --color-light-gray: #999;
  --color-lighter-gray: #ddd;
  --color-lightest-gray: #f5f5f5;
  --color-bg: #FFF;
  --color-panel-bg: rgba(255, 255, 255, 0.35);
  --color-border: rgba(255,255,255,0.65);
  --alert-icon-color: rgb(175, 17, 17);
  --color-negative: rgb(175, 17, 17);
  --text-xxs:   0.667rem;  /* 10px */
  --text-xs:   0.833rem;  /* 12px */
  --text-sm:   1rem; /* 14px */
  --text-base: 1.2rem;     /* 16px */
  --text-lg:   1.44rem; /* 18px */
  --text-xl:   1.728rem;  /* 20px */
  --text-2xl:  2.074rem;   /* 24px */
  --text-3xl:  2.488rem; /* 30px */
  --text-4xl:  2.986rem;  /* 36px */
  --text-5xl:  3.583rem;     /* 48px */
  --text-6xl:  4.299rem;  /* 60px */
  --text-7xl:  5.159rem;   /* 72px */
  --text-8xl:  6.191rem;     /* 96px */
  --text-9xl:  7.429rem;     /* 128px */

  --panel-border-radius: 2rem;

  --avatar-size: 140px;
  --avatar-border-width: 3px;

  --btn-background: var(--color-primary);
  --btn-color: #fff;
  --border-radius: 0.5em;
  }

  height: 100%;
  color: var(--color-text, #000);
  background: var(--color-bg, #fff);
  /* background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 1) 20%, rgba(237, 237, 237, 1) 100%); */
  /* background-image: url("/assets/temp/beach-78c8733c.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; */
  line-height: 1.3;
  font-family: var(--font-secondary);
  font-weight: var(--font-secondary-weight, 400);
  font-style: var(--font-secondary-style, normal);
  font-variation-settings: "wdth" var(--font-secondary-wdth, 100);

  h1, h2, h3, h4, h5, h6, summary, .text-fit {
    /* font-family: "HoperBegin"; */
    font-family: var(--font-primary, "Arial, sans-serif");
    font-weight: var(--font-primary-weight, 400);
    font-style: var(--font-primary-style, normal);
    font-variation-settings: "wdth" var(--font-primary-wdth, 100);
  }

  .hidden { display: none !important }
  .grid { display: grid; }
  .contents { display: contents; }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .columns-2 { columns: 2; }
  /* .column-gap-2 { column-gap: var(--size-2); } */
  .b-full { block-size: 100%; }
  .i-full { inline-size: 100%; }
  .text-uppercase { text-transform: uppercase;}
  .no-wrap { white-space: nowrap; }

  .leading-snug { line-height: var(--leading-snug); }

  .h-4 { height: var(--size-4); }
  .w-4 { width: var(--size-4); }
  .h-6 { height: var(--size-6); }
  .w-6 { width: var(--size-6); }
  .h-8 { height: var(--size-8); }
  .w-8 { width: var(--size-8); }

  .gap { gap: var(--size-1); }
  .gap-2 { gap: var(--size-2); }
  .gap-3 { gap: var(--size-3); }
  .gap-4 { gap: var(--size-4); }

  .hidden { display: none; }

  .grayscale { filter: grayscale(100%);}

  .text-xl { font-size: var(--text-xl); }
  .text-lg { font-size: var(--text-lg); }
  .text-2xl { font-size: var(--text-2xl); }

  .leading-tight { line-height: var(--leading-tight); }

  .text-fitted {
    font-size: 330%;
  }

  .text-underline { text-decoration: underline; }

  .nowrap { white-space: nowrap; }

  .text-fluid-4xl {
    font-size: clamp(2.3rem, 10vw, 3.8rem);
  }
  .text-fluid-3xl {
    font-size: clamp(1.5rem, 10vw, 2.2rem);
  }

  [style*="--gtc:"] { grid-template-columns: var(--gtc);}

  img {
    max-width: 100%;
    height: auto;
  }
  
  a {
    text-decoration: none;
    /* color: var(--color-medium-gray); */
    transition: color var(--transition-fast);
  }
  
  /* a:hover {
    color: var(--color-black);
  } */

  p {
    line-height: var(--leading-loose);
  }

  header {
    text-align: center;
  }

  hr {
    border-top: 1px solid var(--color-border);
  }

  .divider {
    border-color: var(--color-border);
  }


  .profile-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-width:  580px;
    /* margin-left: auto;  
    margin-right: auto; */
  }

  .background-cover-container {
    height: 18rem;
    view-transition-name: header-bg;
    @media (min-width: 581px) {
      height: 22rem;
    }
  }

  .background-cover {
    position: absolute;
    left: 50%;
    top: 0;
    /* width: 580px; */
    width: 100%;
    max-width: 580px;
    /* border-radius: 1rem; */
    /* background-image: url("/assets/temp/engagement-7c05169b.jpg"); */
    /* background-image: url("/assets/temp/whiteranch-ba201bae.jpg"); */
    height: 22rem;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(var(--grayscale-amount, 0%));
    transform: translateX(-50%);
    mask: radial-gradient(100% 100% at center top, #000 60%, transparent 100%);
    .background-cover-overlay {
      height: 100%;
      mask: radial-gradient(100% 100% at center top, transparent 60%, #000 100%);
      -webkit-mask: radial-gradient(100% 100% at center top, transparent 60%, #000 100%);
      backdrop-filter: blur(30px);
    }
    @media (min-width: 581px) {
      height: 25rem;
      margin-block-start: 1rem;
      border-radius: 2rem;
    }
  }


  .header-image {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 100px; */
    height: calc(var(--size-8) + var(--size-8) + var(--avatar-size) / 2);
    width: 100%;
    z-index: -1;
    /* width: 150px; */
    background-image: url("/assets/temp/confetti-c82474d3.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
  }

  .background-image {
    position: fixed;
    inset: 0;
    z-index: -1;
    /* background-image: url("/assets/cream-paper-820c30eb.png"); */
    /* background-image: url("/assets/temp/bg_floral-80697bfa.jpg"); */
    /* background-size: cover; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* background-attachment: fixed; */
  }
  

  main {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* padding-block-start: var(--size-8); */
    /* justify-content: center; */
  }

  .pages-container {
    padding-inline: var(--size-4);
  }

  :is(.input, textarea) {
    inline-size: 100%;
  }

  input, .form-check {
    /* border: 2px solid var(--color-border); */
    /* padding: var(--size-3); */
    border-radius: var(--border-radius);
    background-color: rgba(255,255,255,0.8);
    color: rgba(0,0,0,0.8);
  }

  input {
    padding: var(--size-3);
  }

  .card--selectable {
    margin-bottom: 0;
    cursor: pointer;
    border-radius: var(--border-radius);
    border: 2px solid var(--color-border);
    box-shadow: none;
  }

  .card--selectable:has(:checked) {
    background-color: var(--color-secondary);
    border-color: var(--btn-background);
  }

  :is(input, .checkbox, .radio, .range) {
    &:focus-visible {
      outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
    }
  
    &:focus-visible:user-invalid {
      outline: none;
    }
  
    .field_with_errors & {
      border-color: var(--color-negative);
      /* display: contents; */
    }
  }

  .form-check {
    .field_with_errors {
      display: contents;
    }

    &:has(.field_with_errors) {
      border-color: var(--color-negative);
    }
  }

  .error-messages {
    color: var(--color-negative);
  }


  .hero-image {
    padding: var(--size-3);
    border: 1px solid var(--color-border);
  }





  .panel {
    display: flex;
    flex-direction: column;
    /* flex-grow: 1; */
    background-color: var(--color-panel-bg);
    /* margin-block-start: var(--size-8); */
    padding: var(--size-4);
    border-radius: var(--panel-border-radius);
    /* box-shadow: 0 121px 49px #00000005, 0 68px 41px #00000014, 0 30px 30px #00000024, 0 8px 17px #00000029; */
    margin-block-start: 1.5rem;
    margin-block-end: .5rem;
    /* box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.35); */
    /* border: 0.5px solid var(--panel-border-color); */

    .panel-header {
      position: sticky;
      top: 0;
      /* background-color: var(--color-panel-bg); */
      padding: 5px 0;
      /* display: flex; */
      /* justify-content: flex-end; */
    }

    .panel-title {
      font-size: var(--text-xl);
      /* font-family: var(--font-cursive); */
      /* margin-bottom: var(--size-4); */
    }
  }
  


  
  /* ===== LAYOUT UTILITY CLASSES ===== */
  .container {
    max-width: 35.5rem; /* 1000px */
    margin: 0 auto;

    &:has(.panel) {
      /* justify-content: center; */
    }
  }

  .rsvp-btn {
    /* --btn-block-size: 2.8rem; */
    --btn-inline-size: 100%;
  }

  .btn--close {
    border: 1px solid var(--color-border);
    border-color: var(--color-border);
    img {
      filter: invert(1);  
    }
    /* color: var(--color-text); */
  }
  

  
  /* ===== COMPONENT STYLES ===== */
  /* Page Structure */
  .page {
    /* padding: 1em; */
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    /* justify-content: center; */
    /* align-items: center; */
  }
  
  /* .page.active {
    display: block;
  } */
  

  



  .avatar {
    aspect-ratio: 1;
    font-family: var(--font-cursive);
    border-width: var(--avatar-border-width, 2px);
    border-style: var(--avatar-border-style, solid);
    border-color: var(--avatar-border-color, var(--color-border));
    inline-size: var(--avatar-size);
    block-size: var(--avatar-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color-text);
    background-color: var(--avatar-background-color, #fff);
    font-size: calc(var(--avatar-size) * .4);
    .ampersand {
      font-size: calc(var(--avatar-size) * .17);
      margin-inline: calc(var(--avatar-size) * .025);
      vertical-align: middle;
    }
    img {
      filter: grayscale(var(--grayscale-amount, 0%));
      width: 100%;
      object-fit: cover;
      object-position: center;
      aspect-ratio: 1;
    }
  }
  
  /* Wedding Details */
  .invitation {
    font-size: var(--text-lg);
  }
  
  .wedding-date {
    font-size: var(--text-lg);
    letter-spacing: 0.1875rem; /* 3px */
    /* color: var(--color-black); */
  }
  
  .ampersand {
    font-size: var(--text-lg);
    color: var(--color-dark-gray);
  }
  
  /* Section Headers */
  .section-title {
    font-size: var(--text-lg);
    letter-spacing: 0.1875rem; /* 3px */
    margin-bottom: var(--space-lg);
    text-transform: uppercase;
    color: var(--color-black);
  }
  
  /* RSVP Form */

  .rsvp-buttons {
    margin: -1rem;
    /* max-inline-size: var(--max-i-md);
    margin-inline: auto;
    padding-block: var(--size-4); */
    /* padding-inline: var(--size-4); */
    a {
      padding-block: var(--size-2);
    }

    img, svg {
      margin-block-start: var(--size-1);
    }
    a:first-child {
      border-top-left-radius: var(--panel-border-radius);
      border-bottom-left-radius: var(--panel-border-radius);
    }
    a:last-child {
      border-top-right-radius: var(--panel-border-radius);
      border-bottom-right-radius: var(--panel-border-radius);
    }
    a:hover {
      background-color: rgba(255, 255, 255, 0.5);
    }
  }

  .form-group {
    margin-bottom: var(--space-lg);
  }

  .form-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-2);
    padding-inline: var(--size-4);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    margin-bottom: var(--size-2);
    label {
      padding-block: var(--size-4);
      flex-grow: 1;
      cursor: pointer;
      display: flex;
    }
    
    &:has(input[type="radio"]:checked) {
      /* background-color: var(--color-secondary); */
      border-color: var(--color-primary);
    }
  }

  textarea {
    resize: vertical;
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--size-3);
  }
  
  form label {
    display: block;
    font-size: var(--fs-xxs);
    color: var(--color-black);
  }
  
  .form-input {
    width: 100%;
    padding: var(--space-xs);
    border: 0.0625rem solid var(--color-lighter-gray); /* 1px */
    font-family: var(--font-body);
    font-size: var(--fs-xxs);
  }
  
  textarea.form-input {
    height: 6.25rem; /* 100px */
    resize: vertical;
  }
  
  .radio-group {
    display: flex;
    gap: var(--space-md);
  }
  
  .radio-option {
    display: flex;
    align-items: center;
  }
  
  .radio-option input {
    width: auto;
    margin-right: var(--space-xs);
  }

  /* HOME */

  .profile-picture-container {
    margin: auto;
    margin-block-start: var(--size-8);
  }
  
  .btn {
    transition: background-color var(--transition-fast);
    align-items: center;
    background-color: var(--btn-background);
    block-size: var(--btn-block-size, auto);
    border-radius: var(--btn-radius, var(--rounded-md));
    /* border: 1px solid var(--btn-border-color, var(--color-border)); */
    box-shadow: var(--btn-box-shadow, var(--shadow-xs));
    color: var(--btn-color, var(--color-text));
    column-gap: var(--size-2);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-secondary, var(--font-primary));
    font-size: var(--btn-font-size, var(--text-base));
    font-weight: var(--btn-font-weight, var(--font-medium));
    inline-size: var(--btn-inline-size, auto);
    justify-content: var(--btn-justify-content, center);
    padding: var(--btn-padding, .375rem 1rem);
    position: relative;
    text-align: var(--btn-text-align, center);
    white-space: nowrap;
  }

  .btn--full {
    inline-size: 100%;
  }

  .btn-container {
    margin: 0.6rem 0;
  }

  .btn--hero {
    --btn-inline-size: 100%;
    --btn-padding: 1rem;
    
    transition: all 0.45s cubic-bezier(0.08, 0.59, 0.29, 0.99), box-shadow 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99);
    /* background: #2A7B9B; */
    /* background: linear-gradient(180deg,rgb(239, 231, 209) 25%, rgb(171, 213, 219) 75%); */
    /* background-attachment: fixed; */
    &:hover {
      /* background-image: transparent; */
      scale: 1.02;
      /* color: var(--color-white); */
      /* box-shadow: rgba(8, 49, 112, 0.24) 0px 4px 12px 0px; */
      /* transform: scale(0.98); */
    }

    &.solid {
      /* --btn-background: var(--color-primary); */ 
      /* --btn-color: var(--color-white); */
      --btn-radius: 0;
    }

    &.solidrounded {
      /* --btn-background: var(--color-primary); */
      /* --btn-color: var(--color-white); */
      --btn-radius: 0.5rem;
    }

    &.solidroundedfull {
      /* --btn-background: var(--color-primary); */
      /* --btn-color: var(--color-white); */
      --btn-radius: 50px;
    }
    

    &.outline {
      /* --btn-background: transparent; */
      background: transparent;
      --btn-radius: 0;
      border: 2px solid var(--btn-background);
    }
    &.outlinerounded {
      background: transparent;
      --btn-radius: 0.5rem;
      border: 2px solid var(--btn-background);
    }
    &.outlineroundedfull {
      background: transparent;
      --btn-radius: 50px;
      border: 2px solid var(--btn-background);
    }
  }

  .btn--primary {
    padding: var(--size-3);
  }
  
  .btn--primary:hover {
    /* background-color: rgba(0,0,0,0.2); */
  }

  .btn--outline {
    border: 2px solid var(--color-primary);
    background-color: transparent;
    color: var(--color-primary);
  }

  .btn--icon {
    aspect-ratio: 1;
    padding-inline: var(--size-2);
    /* --btn-inline-size: 2.5rem; */
  }

  .rounded-full {
    border-radius: 9999px;
  }

  .rounded-xl {
    border-radius: 1rem;
  }
  
  /* Events */
  .event-card {
    margin-bottom: var(--size-4);
    padding-bottom: var(--size-4);
    border-bottom: 0.0625rem dotted var(--color-border); /* 1px */
    p {
      margin-bottom: var(--size-3)
    }
  }
  
  .event-card:last-child {
    border-bottom: none;
  }
  
  .event-card h3 {
    /* font-size: var(--fs-md);
    margin-bottom: var(--space-sm);
    color: var(--color-black); */
  }
  
  .event-details {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
    font-size: var(--fs-xxs);
  }
  
  .event-detail {
    margin-right: var(--space-lg);
    margin-bottom: var(--space-xs);
  }
  
  .event-detail strong {
    display: block;
    text-transform: uppercase;
    font-size: var(--fs-tiny);
    letter-spacing: 0.0625rem; /* 1px */
    color: var(--color-medium-gray);
    margin-bottom: var(--space-xxs);
  }
  
  /* Wedding Party */
  .party-group {
    margin-bottom: var(--space-xl);
  }
  
  .party-group h3 {
    font-size: var(--fs-md);
    margin-bottom: var(--space-lg);
    color: var(--color-black);
  }
  
  .party-member-image {
    width: 9.375rem; /* 150px */
    height: 9.375rem; /* 150px */
    margin: 0 auto var(--space-sm);
    overflow: hidden;
  }
  
  .party-member h4 {
    font-size: var(--fs-xs);
    margin-bottom: var(--space-xxs);
    color: var(--color-black);
  }
  
  .party-member p {
    font-size: var(--fs-tiny);
    color: var(--color-medium-gray);
  }
  
  /* Travel */
  .travel-option {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 0.0625rem dotted var(--color-lighter-gray); /* 1px */
  }
  
  .travel-option:last-child {
    border-bottom: none;
  }
  
  .travel-option h3 {
    font-size: var(--fs-md);
    margin-bottom: var(--space-md);
    color: var(--color-black);
  }
  
  .travel-option h4 {
    font-size: var(--fs-xs);
    margin-bottom: var(--space-xs);
    color: var(--color-black);
  }
  
  .accommodation {
    margin-bottom: var(--space-lg);
  }
  
  .map-container {
    height: 25rem; /* 400px */
    margin-top: var(--space-lg);
    border: 0.0625rem solid var(--color-lighter-gray); /* 1px */
  }
  
  /* Registry */
  .registry-item {
    width: 12.5rem; /* 200px */
    text-align: center;
  }
  
  .registry-item img {
    max-width: 9.375rem; /* 150px */
    height: 5rem; /* 80px */
    object-fit: contain;
    margin-bottom: var(--space-sm);
  }
  
  .registry-item a {
    display: inline-block;
    color: var(--color-black);
    font-size: var(--fs-xxs);
    border: 0.0625rem solid var(--color-lighter-gray); /* 1px */
    padding: var(--space-xs) var(--space-md);
    transition: all var(--transition-fast);
  }
  
  .registry-item a:hover {
    background-color: var(--color-lightest-gray);
  }
  
  /* Footer */
  .page-divider {
    border-bottom: 0.0625rem dotted var(--color-lighter-gray); /* 1px */
    margin: var(--space-xl) 0;
  }
  
  footer {
    padding: var(--space-lg) 0;
    font-size: var(--fs-tiny);
    color: var(--color-light-gray);
  }
  
  .footer-brand {
    margin-bottom: var(--space-sm);
    font-family: var(--font-primary);
  }
  
  .footer-links span {
    color: var(--color-lighter-gray);
  }
  
  /* ===== MOBILE STYLES ===== */
  @media (max-width: 768px) {
      --fs-xxl: 2.5rem;
      --fs-xl: 2rem;
      --fs-lg: 1.75rem;

  }
  
  @media (max-width: 480px) {
  
    .event-details {
        flex-direction: column;
    }
  
    .event-detail {
        margin-right: 0;
    }
  
    .registry-links {
        flex-direction: column;
        align-items: center;
    }
  
    .radio-group {
        flex-direction: column;
        gap: var(--space-xs);
    }
  }

  .lightbox {
    /* background-color: oklch(var(--lch-white) / 0.66); */
    block-size: 100dvh;
    border: 0;
    inline-size: 100dvw;
    inset: 0;
    margin: auto;
    max-height: unset;
    max-width: unset;
    overflow: hidden;
    padding: var(--size-2) var(--size-2);
  
    &[open] {
      display: grid;
      place-items: center;
    }
  
    &::backdrop {
      -webkit-backdrop-filter: blur(66px);
      backdrop-filter: blur(66px);
    }
  }
  
  .lightbox__btn {
    align-self: start;
    grid-area: 1/1;
    justify-self: end;
  }
  
  .lightbox__btn--download {
    align-self: end;
    grid-area: 1/1;
    justify-self: end;
  }
  
  .lightbox__btn--share {
    align-self: start;
    grid-area: 1/1;
    justify-self: start;
  }
  
  .lightbox__image {
    grid-area: 1/1;
    max-inline-size: calc(100dvw - (var(--size-2) * 2));
    max-block-size: calc(100dvh - (var(--size-2) * 2));
  }

}



#tabbar {
  --tabbar-height: 0;
  position: fixed;
  display: flex;
  bottom: 0;
  width: 100%;
  height: var(--tabbar-height);
  border-top: 1px solid var(--color-border);
  z-index: 1000;

  @media (min-width: 100ch) {
    display: none;
  }

  @media (max-width: 100ch) {
    --tabbar-height: 4.8rem;

    /* Hide the tabbar when the sidebar is closed */
    .inbox #sidebar:not(.open) ~ & {
      --tabbar-height: 0;
    }

    /* Show the tabbar on the Inbox index page */
    .inbox.only-sidebar-mobile #sidebar ~ & {
      --tabbar-height: 4.8rem;
    }
    
  }

  .tab {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    padding-block-start: 0.5rem;
    justify-content: flex-start;
    background-color: var(--color-bg);

    &.active {
      color: var(--color-link);
    }
    p {
      font-size: 0.7em;
    }
  }
  
}

.text-fit {
  display: flex;
  container-type: inline-size;

  --captured-length: initial;
  --support-sentinel: var(--captured-length, 9999px);

  & > [aria-hidden] {
    visibility: hidden;
  }

  & > :not([aria-hidden]) {
    flex-grow: 1;
    container-type: inline-size;

    --captured-length: 100cqi;
    --available-space: var(--captured-length);

    & > * {
      --support-sentinel: inherit;
      --captured-length: 100cqi;
      --ratio: tan(atan2(
        var(--available-space),
        var(--available-space) - var(--captured-length)
      ));
      --font-size: clamp(
        1em,
        1em * var(--ratio),
        var(--max-font-size, infinity * 1px)
        -
        var(--support-sentinel)
      );
      inline-size: var(--available-space);

      &:not(.text-fit) {
        display: block;
        font-size: var(--font-size);

        @container (inline-size > 0) {
          white-space: nowrap;
        }
      }

      &.text-fit {
        --captured-length2: var(--font-size);
        font-variation-settings:
          'opsz'
          tan(atan2(var(--captured-length2), 1px));
      }
    }
  }
}

@property --captured-length {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --captured-length2 {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}


.background-cover {
  filter: grayscale(100%);
  
}