*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { interpolate-size: allow-keywords; }

    body {
      min-height: 100vh;
      background: #1c1b2e;
      background-image:
        radial-gradient(ellipse at 20% 60%, #2d1b4e 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, #0f2e40 0%, transparent 50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 4rem 2rem;
      font-family: system-ui, sans-serif;
    }

    h1 {
      color: #f4bb41;
      font-size: clamp(1.4rem, 4vw, 2.2rem);
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 3rem;
      text-align: center;
    }

    .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem;
      justify-content: center;
      position: relative;
      anchor-name: --hovered-card;
      isolation: isolate;
      padding: 1rem;
      max-width: 960px;

      & .card:hover {
        anchor-name: --hovered-card;
      }

      &::before,
      &::after {
        content: "";
        position: absolute;
        position-anchor: --hovered-card;

        top: calc(anchor(bottom) - 4px);
        left: anchor(left);
        right: anchor(right);
        bottom: calc(anchor(bottom) + 4px);

        border-radius: 20px;
        transition:
          top 500ms,
          left 500ms,
          right 500ms,
          bottom 500ms;
        transition-timing-function: linear(0, 0.029 1.3%, 0.119 2.8%, 0.659 8.7%, 0.871 11.6%, 1.009 14.6%, 1.052 16.2%, 1.078 17.9%, 1.088 19.7%, 1.085 21.7%, 1.014 31.4%, 0.993 38%, 1.001 57.6%, 1);
      }

      &::before {
        z-index: -1;
        background: rgb(255 255 255 / 0.07);
        backdrop-filter: blur(14px);
        border: 1px solid rgb(255 255 255 / 0.12);
      }

      &::after {
        z-index: -2;
        background: rgb(244 187 65 / 0.1);
      }

      &:has(.card:hover)::before,
      &:has(.card:hover)::after {
        top: anchor(top);
        left: anchor(left);
        right: anchor(right);
        bottom: anchor(bottom);
      }
    }

    .card {
      cursor: pointer;
      border-radius: 20px;
      padding: 1.25rem 1rem 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
      transition: transform 300ms ease;

      &:hover {
        transform: translateY(-6px);
      }

      svg {
        width: 150px;
        height: 150px;
        display: block;
        overflow: hidden;
      }

      span {
        color: rgb(255 255 255 / 0.4);
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
    }

    @scope (#svg-hongo1) {
      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5,
      .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 {
        stroke: #2f3630;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .cls-1, .cls-2, .cls-4, .cls-8, .cls-9, .cls-10 { stroke-width: 1.35px; }
      .cls-1  { fill: #76417c; }
      .cls-2, .cls-5 { fill: #2f3630; }
      .cls-3  { fill: #3171a0; stroke-width: 1.29px; }
      .cls-4  { fill: #fbe7d9; }
      .cls-5  { stroke-width: .29px; }
      .cls-6  { fill: #3171a0; stroke-width: 1.2px; }
      .cls-7  { fill: #3171a0; stroke-width: 1.05px; }
      .cls-8  { fill: none; }
      .cls-9  { fill: #e786a7; }
      .cls-10 { fill: #f4bb41; }
    }

    @scope (#svg-hongo2) {
      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7 {
        stroke: #2f3630;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .cls-1, .cls-2, .cls-4, .cls-5, .cls-6, .cls-7 { stroke-width: 1.07px; }
      .cls-1 { fill: #fbe7d9; }
      .cls-2, .cls-3 { fill: #2f3630; }
      .cls-3 { stroke-width: .29px; }
      .cls-4 { fill: #3171a0; }
      .cls-5 { fill: none; }
      .cls-6 { fill: #e786a7; }
      .cls-7 { fill: #f4bb41; }
    }

    @scope (#svg-hongos) {
      .cls-2, .cls-3, .cls-4, .cls-5 {
        stroke: #2f3630;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .cls-1 { fill: none; }
      .cls-2, .cls-3, .cls-5 { stroke-width: 2px; }
      .cls-2 { fill: #d9514a; }
      .cls-3 { fill: #fbe7d9; }
      .cls-4 { fill: #2f3630; stroke-width: .29px; }
      .cls-5 { fill: #f4bb41; }
    }

    @scope (#svg-tulip) {
      .cls-1, .cls-2, .cls-3, .cls-4 {
        stroke: #2f3630;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .cls-1, .cls-2, .cls-3 { stroke-width: 2px; }
      .cls-1 { fill: #d9514a; }
      .cls-2 { fill: #4c9153; }
      .cls-3 { fill: none; }
      .cls-4 { fill: #f4bb41; stroke-width: 1.59px; }
    }

    @scope (#svg-tulips) {
      .cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
        stroke: #2f3630;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .cls-1, .cls-2, .cls-3, .cls-4 { stroke-width: 2px; }
      .cls-1 { fill: #76417c; }
      .cls-2 { fill: #3171a0; }
      .cls-3 { fill: #4c9153; }
      .cls-4 { fill: none; }
      .cls-5 { fill: #f4bb41; stroke-width: 1.59px; }
    }

    @scope (#svg-luna) {
      .cls-1, .cls-2, .cls-3 {
        stroke: #2f3630;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .cls-1, .cls-2 { fill: #fbe7d9; }
      .cls-1 { stroke-width: .79px; }
      .cls-2 { stroke-width: .62px; }
      .cls-3 { fill: #2f3630; stroke-width: .29px; }
      .cls-4 { fill: #f5bc41; }
    }

    @scope (#svg-flores) {
      .cls-1, .cls-2, .cls-3, .cls-4 {
        stroke: #2f3630;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .cls-1, .cls-3, .cls-4 { stroke-width: 2px; }
      .cls-1 { fill: #fbe7d9; }
      .cls-2 { fill: #2f3630; stroke-width: .29px; }
      .cls-3 { fill: #f4bb41; }
      .cls-4 { fill: #e786a7; }
    }

    @scope (#svg-mario) {
      .cls-1 { fill: #d9514a; }
      .cls-2 { fill: #4c9153; stroke: #2f3630; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; }
      .cls-3 { fill: #f5bc41; }
      .cls-4 { fill: #2f3630; }
    }