@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, demo;

/* ========================= */
/*     ESTILOS DE LA GALERÍA */
/* ========================= */
@layer demo {
  :root {
    --min-col: 150px;
    --max-col: 200px;
  }

  body {
    padding: 3rem;
  }

  .gallery {
    --frame-blur: 3px;
    --frame-size: 35%;
    --frame-border-offset: 7px;
    --frame-border-color: rgb(255 255 255 / .5);

    width: min(100%, 900px);
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(clamp(var(--min-col), 25%, var(--max-col)), 1fr)
    );
    gap: 1rem;
  }

  .gallery-item {
    position: relative;
    overflow: hidden;
  }

  /* IMÁGENES DIRECTAS (sin enlace) */
  .gallery-item > img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    scale: 1.2;
    transition: scale 1s ease-in-out;
    display: block;
  }

  .gallery-item > img:hover {
    scale: 1;
  }

  /* ========= */
  /*  ENLACES  */
  /* ========= */
  .gallery-item a {
    display: block;
    height: 100%;
  }

  .gallery-item a img {
    width: 100%;
    aspect-ratio: 1;     /* IMPORTANTE: mantiene cuadrado */
    object-fit: cover;
    display: block;
    scale: 1.2;
    transition: scale 1s ease-in-out;
  }

  .gallery-item a img:hover {
    scale: 1;
  }

  /* MARCO Y EFECTO */
  .gallery-item::after {
    --hole-size: calc(100% - var(--frame-size));
    content: "";
    position: absolute;
    inset: 0;

    background: rgb(29 41 61 / .5);
    backdrop-filter: blur(var(--frame-blur));
    outline: 1px solid var(--frame-border-color);
    outline-offset: calc(var(--frame-border-offset) * -1);
    pointer-events: none;

    -webkit-mask:
      linear-gradient(red 0 0),
      linear-gradient(red 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%, var(--hole-size) var(--hole-size);
    mask-size: 100% 100%, var(--hole-size) var(--hole-size);
  }
}

/* ============================== */
/* ESTILOS GENERALES (TU PLANTILLA) */
/* ============================== */
@layer base {
  * {
    box-sizing: border-box;
  }

  :root {
    color-scheme: light dark;
    --bg-dark: rgb(24, 24, 27);
    --bg-light: rgb(248, 244, 238);
    --txt-light: rgb(10, 10, 10);
    --txt-dark: rgb(245, 245, 245);
    --line-light: rgba(0 0 0 / .2);
    --line-dark: rgba(255 255 255 / .5);

    --clr-bg: light-dark(var(--bg-light), var(--bg-dark));
    --clr-txt: light-dark(var(--txt-light), var(--txt-dark));
    --clr-lines: light-dark(var(--line-light), var(--line-dark));
  }

  body {
    background-color: var(--clr-bg);
    color: var(--clr-txt);
    min-height: 100svh;
    margin: 0;
    padding: 2rem;
    font-family: "Jura", sans-serif;
    display: grid;
    place-items: center;
  }
}