@media (max-width: 600px) {

	html {
		font-size: 12pt;
	}

	main {
		padding: 100px 0;
		width: 100%;
        top: 0;
        left: 0;
        right: 0;
	}

    #nav::before {
        top: -490px; 
        bottom: -80px;
    }

	#nav ul li {
		padding: 0.2rem 0.4rem;
	}

	#nav ul li a {
		font-size: 12pt;
	}

	.collection-menu {
	  display: flex;
	  justify-content: space-evenly;
	  list-style: none;
	  margin: 5px 0 0 0;
	  background: #f9f9f9;
	  border-top: 1px solid #ddd;
	  align-items: stretch;
	}

	.collection-menu li {
		font-size: 1rem;
		display:flex;
		cursor: pointer;        /* show hand on hover */
		padding: 10px;
		flex-direction: column;       /* Stack text vertically */
		align-items: center;          /* Vertical alignment */
		justify-content: center;      /* Horizontal alignment */
		flex: 1;
		background: rgba(255, 255, 255, 0.1);
		transition: background 0.3s, transform 0.2s;
	}
	.gallery {
	  display: grid;
	  grid-template-columns: repeat(auto-fill, minmax(110px, 0.9fr));
	  gap: 0.1rem 0.1rem;
	}

	.item {
	  position: relative; /* Add this - creates positioning context */
	  display: block; /* ensure block-level */
	  overflow: hidden; /* prevents any overflow */
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	}
}