.top-selector {
display: flex;
flex-direction: column;
padding: var(--spacing-lg) var(--spacing-md) 0 var(--spacing-md);
gap: 50px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
max-width: var(--container-max-width);
width: 100%;
margin: auto;
padding: var(--spacing-lg) var(--spacing-md);
box-sizing: border-box;
}  .sight-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-self: center;
position: relative;
z-index: 2;
margin: auto;
height: 100%;
gap: var(--spacing-xs);
padding: var(--spacing-sm);
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.sight-container.hidden {
display: none;
} .top-title {
font-size: 36px; color: var(--color-primary);
font-weight: 200; text-align: center;
}
.sight-title {
font-weight: 100; letter-spacing: 0.1em !important; white-space: nowrap;
font-size: 20px; overflow: hidden;
text-align: center;
}  .tag-selector,
.tag-item {
text-decoration: none;
display: flex;
justify-content: center;
align-items: center;
color: var(--color-primary);
border-radius: var(--border-radius);
border: solid 1px;
width: fit-content;
height: 20px;
letter-spacing: 0.1em;
background-color: transparent;
white-space: nowrap;
}
.tag-selector {
cursor: pointer;
padding: 15px;
font-size: 16px;
transition: all 0.5s;
}
.tag-item {
padding: 10px;
transition: all 1s;
font-size: 11px;
}
.active3,
.tag-selector:hover {
color: var(--color-text-light);
background-color:var(--color-primary);
border-color: var(--color-primary);
} @media (hover: hover) and (pointer: fine) {
.tag-selector:hover {
color: var(--color-text-light);
background-color: var(--color-primary);
border-color: var(--color-primary);
}
} .sight-thumbnail {
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
}
.sight-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .tag-container {
justify-content: center;
}
.sight-tags {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: var(--spacing-xs);
align-content: flex-start;
} .grow-desktop {
flex-grow: 1;
}
.grow-mobile {
flex-grow: 0;
} @media (max-width: 767px) {
.grid-container {
padding: 10vw 4vw;
gap: 10px;
}
.sight-container {
padding: 4vw;
}
.sight-container .sight-tags {
height: 65px;
gap: 5px;
}
.sight-thumbnail {
max-height: 150px;
}
.grow-mobile {
flex-grow: 1;
}
.grow-desktop {
flex-grow: 0;
}
.sight-title {
font-size: var(--mobile-subtitle-size) !important;
white-space: wrap;
}
.description p {
display: none;
}
.top-title{
font-size: var(--mobile-title-size);
}
}