/****  COMMON CSS SETTINGS FOR ALL DEVICES ***/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* * { outline: 0.1dvw solid darkgreen; } */


/* GLOBAL PAGE SETTINGS */
* {margin: 0; padding: 0; box-sizing: border-box;}
:root {
    --button-1: 10em; --button-2: 15em;--button-3: 20em;--button-4: 25em;
    --fs-1: 1rem; --fs-2: 2rem; --fs-3: 3rem; --fs-4: 4rem;
    --height-1: 2dvh; --height-2: 4dvh; -height-3: 6dvh; --height-4: 8dvh;
    --margin-1: 1dvw; --margin-2: 2dvw; --margin-3: 6dvw; --margin-4: 8dvw;
    --padding-1: 2dvw; --padding-2: 4dvw; --padding-3: 6dvw; --padding-4: 8dvw;
    --width-1: 2dvw; --width-2: 4dvw; --width-3: 6dvw; --width-4: 8dvw;--width-5: 10dvw;--width-6: 12dvw;
    --s: .5dvw; --c:darkgrey 70% 35%; --d: blue;
    --main-color: red; --secondary-color: lightgreen;  --txt-color: aliceblue;
    --img-bg-color: rgba(240, 240, 240, 0.9);
}
body {font-family: system-ui, -apple-system, sans-serif; color:#333 ;font-size: var(--fs-1); min-height: 100dvh;}
html{scroll-behavior: smooth;}

/* CONTAINER GRID COMPOSITION */
.container{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px),1fr)); grid-auto-flow: column; grid-auto-rows: minmax(1dvh, auto); width: 100%; height: auto; }
.container{container-type: inline-size; container-name: parent;}
.heading{grid-column: 1/5; grid-row: 1/2; }
#intro{grid-column: 1/5; grid-row: 2/3 ;}
.lw-container{grid-column:1/5; grid-row: 3/4;}

/** HEADING FORMATTING **/
.heading{display: grid; grid-row: 1 / 2; grid-template-rows: subgrid;  grid-column: 1 / 5; grid-template-columns: subgrid;}
.heading{display: grid; grid-template-columns: 1fr 2fr;}
.heading{background-image:
    repeating-linear-gradient(25deg, transparent 1dvw 1.2dvw, red 1.2dvw 1.3dvw, transparent 1.3dvw 1.4dvw, aqua 1.4dvw 1.5dvw, transparent 1.5dvw 1.6dvw,  yellow 1.6dvw 1.7dvw),
    repeating-linear-gradient(-25deg, transparent 1dvw 1.2dvw, blue 1.2dvw 1.4dvw, transparent 1.4dvw 1.5dvw, skyblue 1.4dvw 1.5dvw, transparent 1.2dvw 1.4dvw, aliceblue 1.6dvw 1.7dvw),
    repeating-linear-gradient(65deg, transparent 1.1dvw 1.2dvw, green 1.3dvw 1.6dvw, transparent 1.3dvw 1.5dvw, lightgreen 1.6dvw 1.7dvw, transparent 1.2dvw 1.4dvw, seagreen 1.9dvw 1.11dvw),
     repeating-linear-gradient(-65deg, transparent 1dvw 1.2dvw, blue 1.2dvw 1.4dvw, transparent 1.4dvw 1.5dvw, skyblue 1.4dvw 1.5dvw, transparent 1.2dvw 1.4dvw, aliceblue 1.6dvw 1.7dvw)
    ;}

/* navigation settings */
#menu button{position: fixed; max-width: 7%; width: 100%; height: 5%; margin-block: 5dvh; background:skyblue; opacity:1; color:white; box-shadow:inset 0 0 0 1px black; border:0.2dvw solid white; display: flex; justify-content: center; align-items: center; border-radius: 1dvw; z-index: 10;}
#menu button a{font-size: clamp(1rem, calc(var(--fs-1)*2), 2.3rem);}
#menu button:hover{background:grey; color:aliceblue; box-shadow:inset 0 0 0 1px white; border:0.2dvw solid black; cursor: pointer;}
header{width: 65dvw; height: 15dvh; }
header h1{position: relative; font-size: clamp(1rem, calc(var(--fs-3)*2), 4rem) ; width: 50%; margin-left: 0dvw; animation: infinite linear 30s styling; z-index: 99; }
@keyframes styling{
    0%{ translate: 0dvw 0dvw  1dvw; color: black; }
    25%{ translate: 6dvw 3dvw 2dvw; color:white; }
    50%{ translate: 0dvw 0dvw 3dvw; color: red;}
    75%{ translate: -6dvw 3dvw 2dvw; color: white; }
    100%{ translate: 0dvw 0dvw 1dvw; color: black;}
}
h1 span{font-size: calc(var(--fs-1)*1.4); }

/* INTRO FORMATTING */
#intro{display: flex; flex-flow: row nowrap;}

/* enlarge settings */
#enlarge, .enlarge{display: flex; flex-flow: column wrap; font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem); width: 30dvw; line-height: 3;}
#number{ color: red; margin-left: 0.25dvw;}
.refresh button{position: relative; display: inline-block; background-color: darkgrey; color: white; font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem); cursor: pointer;}
.refresh button:hover{background-color: magenta;}

/* map settings */
.container-map{width: 18dvw;}
.map:hover{cursor: pointer;}
.map img{position: relative; width: 18dvw; aspect-ratio: 3/2; z-index: 13;  margin-inline: auto;}

/* filter settings */
.filters{position: relative; display:flex; flex-flow: column nowrap; justify-items:flex-start; width: 100%;margin-left: 5dvw;}
.filters .search p{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem); margin-top: 5dvh; }
#searchInput{width: calc(var(--button-1)*1.1); height: var(--height-2); font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem); border-radius: 2dvw; background-color: lightgrey; margin-bottom: 3%;}
#searchInput p{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem)}
#searchInput:focus-within{background-color:white; }
.filter{display:flex; flex-flow: row wrap; width: 45dvw; justify-items: space-between;}
.filter button{ position: relative; width:max-content; font-size: calc(var(--fs-1)*2); background-color: lightgrey; padding-inline: 1dvw; margin-inline: .5%; border-radius: 35%;}
.filter button:hover{background-color: magenta;}
.filter button:focus-within{background-color:orange; color: navy;}

/* FORMATTING THE IMAGE CONTAINER SECTION */
.lw-container{box-sizing: border-box; max-width: 100%; width: 100%;}
.lw-box{ display: grid; grid-row: 3 / 4; grid-template-rows: subgrid;  grid-column: 1 / 5; grid-template-columns: subgrid;}
.lw-box{ display: grid; grid-template-columns: repeat(auto-fill, minmax(10%, 1fr)); gap: 0.5dvw; height: auto ;}
.gallery-item .image-item{ border-radius: 5%; box-shadow: 0 0.2dvw 0.8dvw rgba(0,0,0,0.08); max-width: 30dvw; width: 100%; height: auto; aspect-ratio: 4/3;}
.image-item img {display: block; width: 25dvw; max-width: 100%; height: auto; aspect-ratio: 4/3; border: 0.1dvw solid burlywood; object-fit: fill; border-radius: 5%;}
.image-item img:hover{cursor: pointer; scale: 1.1; transition: 0.5s;}
.image-item .location{width:100%; border:0.1dvw solid skyblue; background-color: rgb(191, 11, 11); line-height: 1.5; color: white; text-align: center; border-radius: 1dvw;font-size: clamp(1rem, calc(var(--fs-1)*1.2), 3rem)}
.image-item .address{ width: 100%; border: 0.05dvw solid blue; background-color:lightgrey; border-radius: 1dvw; line-height: 1; text-align: center;font-size: clamp(1rem, calc(var(--fs-1)*1), 3rem)}
.image-item button{position: absolute;margin-top: -1dvh; margin-left: 0.5dvw; font-size: calc(var(--fs-1)*1); border-radius: 5%;}
.image-item button:hover{cursor: pointer;}
.address span{font-size: clamp(1rem, calc(var(--fs-2)*1), 3rem); margin-left: 10%;}
.address span::after{content:"⌚";font-size: clamp(1rem, calc(var(--fs-1)*0.8), 3rem); margin-inline: calc(var(--margin-1)/6);}
.lw-box .after{margin-top: 2.5dvh;}
.image-item .text{box-sizing: content-box; position: relative; margin-top: -70%;}
.image-item .text p{display: flex; justify-content: flex-start; width: 100%; height: 100%; z-index: 1; position: relative; font-size: clamp(1rem, calc(var(--fs-1)*0.9), 2rem); color: black;background-color: cornsilk; cursor: pointer; border-radius: 0.1dvw;}
.text p span{font-size: clamp(1rem, calc(var(--fs-1)*0.9), 2rem);}

/*settings for the pop-up */
#lw-screen { position: fixed; width: 100%; height: 95%;  bottom: 1dvw; left: 1dvw; background: transparent; z-index: 9999;  text-align: center; }
#lw-screen .lw-image {height: 100%; display: inline-flex; justify-content: center; align-items: center;}
#lw-screen .lw-image img {max-width: 80%; max-height: 80%; margin: 0 auto; box-shadow: 0.2dvw 0.2dvw burlywood; transition: all 5s ease; border-radius: 1dvw; position: relative;}
.lw-btn {display: flex; justify-content:center; align-items: center ;width: 3dvw; height: 6dvh; background: var(--main-color); color: var(--txt-color); cursor: pointer; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease;  -webkit-transition: all 0.4s ease;  transition: all 0.4s ease; font-size: clamp(1rem, calc(var(--fs-2)*2), 4rem); position: relative;}
.lw-btn:hover { background: var(--secondary-color); }
.lw-close {position: absolute; bottom: 15%; right: 35%;}

/* settings for the district grid */
.district{position: relative; display: flex; justify-content: center; align-items: center; width: 8dvw; height: 18dvh; background-color: grey; color: rgba(226, 216, 87, 0.899); font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem); border-radius: 1dvw; box-shadow: 0.2dvw 0.2dvw black; margin: 2dvw auto; cursor: pointer;}

/* formatting the new grid for the selection */
#selectedGrid{display: inline-grid; grid-template-columns: repeat(auto-fill, minmax(10%, 1fr));grid-auto-rows: minmax(1dvw, auto); row-gap: 2dvw; max-width: 99dvw; position: relative; width: 100%; height: auto; overflow: hidden; background-position: left top; }
#selectedGrid{background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, #90a4ae 1px, #90a4ae 2px); }
#selectedGrid .image-item .location{width:100%; border:0.1dvw solid skyblue; background-color: rgb(191, 11, 11); line-height: 1.5; color: white; text-align: center; border-radius: 1dvw;font-size: clamp(1rem, calc(var(--fs-1)*1.2), 3rem);}
#selectedGrid .image-item .address{ width: 100%; border: 0.05dvw solid blue; background-color:lightgrey; border-radius: 1dvw; line-height: 1; text-align: center;font-size: clamp(1rem, calc(var(--fs-1)*1), 3rem);}

/* format the WATERMARKING */
.image-item { position: relative;  display: inline-block; }
.filter::after{ content: 'Copyright: © L. Witters, © involved artist(s)';  position: relative;  font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem); color: red; top:100%; right: 0%; pointer-events: none; /* Ensures the watermark doesn't interfere with clicks */}

/* format the REMOVED sign */
.removed{margin-bottom: -5dvh;}
.removed::after{ content: "🧱";  position: relative;  top: -12%; left: 90%; background-color: white; font-size: clamp(1rem, calc(var(--fs-1)*1.2), 3rem); border-radius: 50%;  z-index:11; opacity: 1; pointer-events: none; /* Ensures the icon doesn't interfere with clicks */}

/* formatting the NUMBERING */
.lw-box{ counter-reset: image-number;}
.image-item { counter-increment: image-number;}
.lw-box .image-item::before{ content: counter(image-number); position: absolute;  top: 12%; right: 2%; width: max-content;  color: white; background-color: grey; padding: 0.2dvw; font-weight: normal; border-radius: 50%; z-index: 1;}

/***=== ADJUSTED CSS SETTINGS FOR DIFFERENT SIZES ===***/

/*max-width: 107rem = 1,712px */
@media only screen and (96rem <= width <= 107rem){
      #menu button{max-width: 12dvw; width: 100%; font-size: clamp(1rem, calc(var(--fs-1)*0.9), 2rem); }
      header{height: 15dvh;}
      header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.5), 4rem); width: 50%;}
      .enlarge{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
      .refresh button{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
      .map img{ width: 22dvw; height: auto; aspect-ratio: 4/3; }
      .lw-box{ display: grid;  grid-template-columns: repeat(5, 1fr);}
      .filters .search p{font-size: clamp(1rem, calc(var(--fs-1)*1.2), 2rem);}
      #searchInput{font-size: clamp(1rem, calc(var(--fs-1)*1.3), 2rem);}
      .filter button{font-size:clamp(1rem, calc(var(--fs-1)*1.3), 2rem);}
      .image-item .location{font-size: clamp(1rem, calc(var(--fs-1)*1), 3rem)}
      .image-item .text p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.9), 2rem); }
      .lw-close {position: absolute; bottom: 25%; right: 20%;}
      .filter::after{ font-size: clamp(1rem, calc(var(--fs-1)*1), 3rem)}
      .district{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 3rem); width: 18dvw; height: 18dvh;}
      #selectedGrid{display: inline-grid; grid-template-columns: repeat(4, 1fr);}
}
/*max-width: 96rem = 1,528px */
@media only screen and (85rem <= width <= 96rem){
      #menu button{max-width: 12dvw; width: 100%; font-size: clamp(1rem, calc(var(--fs-1)*0.9), 2rem); }
      header{height: 15dvh;}
      header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.25), 3rem); width: 75%;}
      .enlarge{font-size: clamp(1rem, calc(var(--fs-1)*0.9), 2rem);}
      .refresh button{font-size: clamp(1rem, calc(var(--fs-1)*0.9), 2rem);}
      .map img{ width: 19dvw; height: auto; aspect-ratio: 4/3; }
      .lw-box{ display: grid;  grid-template-columns: repeat( 4, 1fr);}
      .filters .search p{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
      #searchInput{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
      .filter button{font-size:clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
      .image-item .location{font-size: clamp(1rem, calc(var(--fs-1)*1), 3rem)}
      .image-item .text p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.9), 2rem); }
      .image-item button{margin-top: -2dvh;}
      .lw-close {position: absolute; bottom: 25%; right: 28%;}
      .filter::after{ font-size: clamp(1rem, calc(var(--fs-1)*1), 3rem)}
      .district{font-size: clamp(1rem, calc(var(--fs-1)*1), 3rem); width: 12dvw; height: 12dvh;}
      #selectedGrid{display: inline-grid; grid-template-columns: repeat(4, 1fr);}
}


/* max-width: 85rem = 1,360px */
@media only screen and (75rem <= width <= 85rem){
    #menu button{max-width: 20%; width: 100%; font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem); }
    header{height: 15dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-1)*2), 4rem); width: 60%; }
    .enlarge{font-size: clamp(0.5rem, calc(var(--fs-1)*1.1), 2rem);}
    .refresh button{font-size: clamp(0.5rem, calc(var(--fs-1)*1.1), 2rem);}
    .map img{ width: 19dvw; height: auto; aspect-ratio: 1/1; }
    .filters .search p{font-size: clamp(0.5rem, calc(var(--fs-1)*1.1), 2rem);}
    #searchInput{font-size: clamp(0.5rem, calc(var(--fs-1)*1.1), 2rem); height: 3dvh;}
    .filter button{font-size:clamp(0.5rem, calc(var(--fs-1)*1.1), 2rem);}
    .lw-box{display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px ; max-width: 99dvw; width: 100%; height: 100dvh; box-sizing: border-box;}
    .image-item{width: 20dvw; height:100%; }
    .image-item img{display: block; width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover;}
    .image-item .location{font-size: clamp(0.5rem, calc(var(--fs-1)*1.1), 2rem); width: 20dvw; max-width:100%;}
    .image-item .address{font-size: clamp(0.5rem, calc(var(--fs-1)*1.1), 2rem);}
    .image-item .address span{font-size: clamp(0.5rem, calc(var(--fs-1)*1.1), 2rem);}
    .image-item .text p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.7), 1rem); width: 20dvw;}
    .image-item .address span::after{content:"⌚";font-size: clamp(1rem, calc(var(--fs-1)*1.1), 3rem);}
    .image-item button{margin-top: -8dvh;}
    .lw-close {position: absolute; bottom: 25%; right: 28%;}
    .filter::after{ font-size: clamp(0.5rem, calc(var(--fs-1)*1.1), 2rem); top: 50%}
    .district{font-size: clamp(0.0rem, calc(var(--fs-1)*1.1), 2rem); width: 12dvw; height: 12dvh;}
    #selectedGrid{display: inline-grid; grid-template-columns: repeat(3, 1fr);}
}

/* max-width: 75rem = 1,200px */
@media only screen and (65rem <= width <= 75rem) {
    #menu button{max-width: 20%; width: 100%; font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem); }
    header{height: 15dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-2)*1.5), 4rem); width: 60%; }
    .enlarge{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
    .refresh button{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
    .map img{ width: 19dvw; height: auto; aspect-ratio: 4/3; }
    .filters .search p{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
    #searchInput{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem); height: 3dvh;}
    .filter button{font-size:clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
    .lw-box{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5dvw; max-width: 99dvw; width: 100%; height: 100dvh; overflow: auto; box-sizing: border-box;}
    .gallery-item .image-item{ max-width: 30dvw; width: 100%; height: fit-content; aspect-ratio: 4/3;}
    .image-item img {width: 30dvw; max-width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;}
    .image-item .location{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
    .image-item .address{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
    .image-item .address span{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);}
    .image-item .text p{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem); }
    .image-item .address span::after{content:"⌚";font-size: clamp(1rem, calc(var(--fs-1)*1.1), 3rem);}
    .image-item button{margin-top: -2dvh;}
    .lw-close {position: absolute; bottom: 25%; right: 28%;}
    .filter::after{ font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem); top: 50%}
    .district{font-size: clamp(1rem, calc(var(--fs-1)*1.1), 2rem);width: 12dvw; height: 12dvh;}
    #selectedGrid{display: inline-grid; grid-template-columns: repeat(3, 1fr);}
}

 /* max-width : 65rem  = 1,040px */
 @media only screen and (55rem <= width <= 65rem) {
    #menu button{max-width: 20%; width: 100%; font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem); }
    header{height: 15dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-1)*2), 4rem); width: 60%; }
    .enlarge{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem);}
    .refresh button{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem);}
    .map img{ width: 19dvw; height: auto; aspect-ratio: 4/3; }
    .filters .search p{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem);}
    #searchInput{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem); height: 3dvh;}
    .filter button{font-size:clamp(0.5rem, calc(var(--fs-1)*1), 2rem);}
    .lw-box{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5dvw; max-width: 99dvw; width: 100%; height: 100dvh; overflow: auto; box-sizing: border-box;}
    .gallery-item .image-item{ max-width: 30dvw; width: 100%; height: fit-content; aspect-ratio: 4/3;}
    .image-item img {width: 30dvw; max-width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;}
    .image-item .location{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem);}
    .image-item .address{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem);}
    .image-item .address span{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem);}
    .image-item .text p{font-size: clamp(0.5rem, calc(var(--fs-1)*1), 2rem); }
    .image-item .address span::after{content:"⌚";font-size: clamp(1rem, calc(var(--fs-1)*1), 3rem);}
    .image-item button{margin-top: -2dvh;}
    .lw-close {position: absolute; bottom: 25%; right: 28%;}
    .filter::after{ font-size: clamp(0.5rem, calc(var(--fs-1)*1.1), 2rem); top: 50%}
    .district{font-size: clamp(0.5rem, calc(var(--fs-1)*1.1), 2rem); width: 12dvw; height: 12dvh;}
    #selectedGrid{display: inline-grid; grid-template-columns: repeat(3, 1fr);}
}

/* max-width: 55rem =  880px */
 @media only screen and (45rem <= width <= 55rem){
    #menu button{max-width: 20%; width: 100%; height: 5dvh; font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem); }
    header{height: 12dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); width: 60%; }
    .enlarge{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem);}
    .refresh button{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem);}
    .map img{ width: 19dvw; height: auto; aspect-ratio: 4/3; }
    .filters .search p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    #searchInput{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); height: 6dvh;}
    .filter button{font-size:clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .lw-box{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5dvw; max-width: 99dvw; width: 100%; height: 100dvh; overflow: auto; box-sizing: border-box; margin-top: 2dvh;}
    .gallery-item .image-item{ max-width: 30dvw; width: 100%; height: fit-content; aspect-ratio: 4/3;}
    .image-item img {width: 30dvw; max-width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;}
    .image-item .location{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem);}
    .image-item .address{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem);}
    .image-item .address span{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem);}
    .image-item .text p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); }
    .image-item .address span::after{content:"⌚";font-size: clamp(1rem, calc(var(--fs-1)*0.8), 3rem);}
    .image-item button{margin-top: -18dvh;}
    .lw-close {position: absolute; width: 2dvw; height: 3dvh; bottom: 25%; right: 28%;}
    .filter::after{ font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); top: 20%}
    .district{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); width: 14dvw; height: 12dvh; margin-top: 4dvh;}
    #selectedGrid{display: inline-grid; grid-template-columns: repeat(3, 1fr);}
}

/* max-width: 45rem =  720px */
 @media screen and (35rem <= width <= 45rem){
     #menu button{max-width: 15%; width: 100%; font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem); }
    header{height: 15dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); width: 60%; animation: 0;}
    .enlarge{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .refresh button{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .map img{ width: 19dvw; height: auto; aspect-ratio: 4/3; }
    .filters .search p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    #searchInput{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); height: 6dvh;}
    .filter button{font-size:clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .lw-box{display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5dvw; max-width: 99dvw; width: 100%; height: 100dvh; overflow: auto; box-sizing: border-box;}
    .gallery-item .image-item{ max-width: 30dvw; width: 100%; height: fit-content; aspect-ratio: 4/3;}
    .image-item img {width: 30dvw; max-width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;}
    .image-item .location{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .image-item .address{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .image-item .address span{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .image-item .text p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem); }
    .image-item .address span::after{content:"⌚";font-size: clamp(1rem, calc(var(--fs-1)*0.8), 3rem);}
    .image-item button{margin-top: -2dvh;}
    .lw-close {position: absolute; bottom: 25%; right: 28%;}
    .filter::after{ font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); top: 50%}
    .district{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); width: 18dvw; height: 12dvh;}
    #selectedGrid{display: inline-grid; grid-template-columns: repeat(2, 1fr);}
 }


/* max-width: 35rem =  560px */
 @media only screen and (25rem <= width <= 35rem){
    #menu button{max-width: 15%; width: 100%; font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem); }
    header{height: 15dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); width: 60%; animation: 0;}
    h1 span{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem) }
    .enlarge{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .refresh button{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .map img{ width: 19dvw; height: auto; aspect-ratio: 4/3; }
    .filters .search p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    #searchInput{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); height: 4dvh;}
    .filter button{font-size:clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .lw-box{display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5dvw; max-width: 99dvw; width: 100%; height: 100dvh; overflow: auto; box-sizing: border-box;}
    .gallery-item .image-item{ max-width: 30dvw; width: 100%; height: fit-content; aspect-ratio: 4/3;}
    .image-item img {width: 30dvw; max-width: 100%; height: auto; aspect-ratio: 4/3; }
    .image-item .location{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .image-item .address{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .image-item .address span{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .image-item .text p{font-size: clamp(0.3rem, calc(var(--fs-1)*0.4), 1rem); }
    .image-item .address span::after{content:"⌚";font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .image-item button{margin-top: -4dvh;}
    .lw-close {position: absolute; bottom: 25%; right: 28%;}
    .filter::after{ font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); top: 50%}
    .district{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); width: 26dvw; height: 12dvh; margin-top: 2dvh;}
    #selectedGrid{display: inline-grid; grid-template-columns: repeat(2, 1fr);}
 }

/* max-width: 25rem =  400px */
 @media only screen and (20rem <= width <= 25rem) {
    #menu button{max-width: 15%; width: 100%; font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem); }
    header{height: 15dvh;}
    header h1{font-size: clamp(1rem, calc(var(--fs-1)*1.5), 2rem); width: 60%; animation: 0;}
    h1 span{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem) }
    .enlarge{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .refresh button{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .map img{ width: 19dvw; height: auto; aspect-ratio: 4/3; }
    .filters .search p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    #searchInput{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem);height: 3dvh;}
    .filter button{font-size:clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .lw-box{display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5dvw; max-width: 99dvw; width: 100%; height: 100dvh; overflow: auto; box-sizing: border-box;}
    .image-item .location{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .image-item .address{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .image-item .address span{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem);}
    .image-item .text p{font-size: clamp(0.5rem, calc(var(--fs-1)*0.6), 1rem); }
    .image-item .address span::after{content:"⌚";font-size: clamp(1rem, calc(var(--fs-1)*0.8), 3rem);}
    .image-item button{margin-top: -2dvh;}
    .lw-close {position: absolute; bottom: 25%; right: 28%;}
    .filter::after{ font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem); top: 50%}
    .district{font-size: clamp(0.5rem, calc(var(--fs-1)*0.8), 1rem);}
    #selectedGrid{display: inline-grid; grid-template-columns: repeat(2, 1fr);}
 }