@font-face {
    font-family: 'Gilroy-Medium';
    src: local('Gilroy-Medium'), url('Gilroy-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy-UltraLight';
    src: local('Gilroy-UltraLight'), url('Gilroy-UltraLight.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy-Regular';
    src: local('Gilroy-Regular'), url('Gilroy-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




:root {
  --dark-gray: rgb(56, 56, 56);
  font-family: 'Gilroy-Regular', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: rgb(250, 250, 250);
}

.gallery-track {
  margin-top: 4vw;
  position: fixed;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0.25rem;
  padding: 0.25rem;
  will-change: transform;
}

.card {
  height: 400px;
  overflow: hidden;
  cursor: pointer;

  .card-image-wrapper {
	height: 115%;
	will-change: transform;
  }

  .card-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
} 

.card-image-wrapper img {
    width: 100%;
    transition: transform 0.3s ease-in-out;
}

.card-image-wrapper img:active {
    transform: scale(1.2);
}

nav {
	height: 4vw;
	width: 100%;
	background-color: rgb(250, 250, 250);
	position: fixed;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	user-select: none;
	padding: 2.2vw;
}

.zoomed {
	position: fixed;
	inset: 0;
	margin: auto;
	max-width: 80vw;
	max-height: 80vh;
	z-index: 1000;
	transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.3, 1), 
				opacity 0.5s ease-in-out, 
				clip-path 0.5s cubic-bezier(0.3, 1.5, 0.3, 1);
	clip-path: circle(0% at center);
	opacity: 0;
	transform: scale(0);
	object-fit: contain;
  }
  
  .zoomed.active {
	clip-path: circle(100% at center);
	opacity: 1;
	transform: scale(1);
  }
  
  


.logo img{
	width: 10vw;
}


.links {
	display: flex;
	cursor: pointer;
}

h1 {
	font-size: 1.4vw;
	font-family: 'Gilroy-Regular';
	font-weight: 400;
	color: rgb(190, 190, 190);
	padding-bottom: 0.5vw;
	padding-right: 6vw;
}

.link {
	position: relative;
	overflow: hidden;
	padding-bottom: 0.5vw;
	font-size: 1.4vw;
	color: rgb(190, 190, 190);
	text-decoration: none; /* Убирает подчёркивание */
}




.linkline {
	position: absolute;
	display: block;
}

.link:after {
	content: "";
	position: absolute;
	bottom: 0.2vw;
	right: 0;
	width: 0%;
	height: 0.11vw;
	background-color: rgb(190, 190, 190);
	transition: all 0.32s cubic-bezier(.47,.17,.3,1);
}

.link:hover:after {
	left: 0;
	width: 100%;
}

.linkWhite {
	margin-left: 3vw;
	position: relative;
	overflow: hidden;
	padding: 0.5vw 0;
	cursor: pointer;
}

.linkWhite:after {
	content: "";
	position: absolute;
	right: 0;
	width: 0%;
    height: 2px;
    background: rgb(250, 250, 250);
	transition: all 0.32s cubic-bezier(.47,.17,.3,1);
}

.linkWhite:hover:after {
	left: 0;
	width: 100%;
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* Скроллбар                                        */
/*::::::::::::::::::::::::::::::::::::::::::::::::::*/


::-webkit-scrollbar {
  width: 10px; /* Scrollbar width */
  background-color: rgb(250, 250, 250); 
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(190, 190, 190);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #888888; /* Цвет при наведении */
}


@media (max-width: 800px) {
  .gallery-track {
	grid-template-columns: repeat(2,1fr);
  }
  .card {
	height: 250px;
  } 
}

@media (max-width: 550px) {

.gallery-track {
  margin-top: 12vw;
  position: fixed;
  display: grid;
  grid-template-columns: repeat(1,1fr);
  gap: 0.25rem;
  padding: 0.25rem;
  will-change: transform;
}

.card {
  height: 300px;
  overflow: hidden;

  .card-image-wrapper {
	height: 115%;
	will-change: transform;
  }

  .card-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
} 

nav {
	height: 16vw;
	width: 100%;
	background-color: rgb(250, 250, 250);
	position: fixed;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	user-select: none;
	padding: 5vw;
}

h1 {
	display: none;
}

.logo img{
	width: 33vw;
}

.links {
	display: flex;
	cursor: pointer;
}

.link {
	position: relative;
	overflow: hidden;
	padding-top: 0.6vw;
	padding-bottom: 1.2vw;
	font-size: 4.8vw;
	color: rgb(190, 190, 190);
}

}