header {
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.24);
}

.filters {
    background-color: var(--color12);
    display: flex;
    gap: 12px;
    padding: 26px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.filter {
    border-radius: 26px;
    background-color: transparent;
    border: 2px solid var(--color11);
    color: var(--color11);
    white-space: nowrap;
    transition: 300ms;
}

.filters::-webkit-scrollbar {
  display: none;
}

.filter.active {
    background-color: var(--color11);
    color: var(--color12);
    transition: 150ms;
}

main {
    display: grid;
    gap: 2vw;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
    padding: 16px;
    padding-bottom: 160px;
    height: 590px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.image {
    display: inline-block;
    width: 45vw;
    height: 45vw;
	background-color: rgb(19, 19, 20);
    border-radius: 8px;
    background-position: center;
	cursor: pointer;
}

.hidden {
    display: none;
}

.screen_background {
	display: none;
	background-color: rgba(78, 84, 88, 0.377);
	position: fixed;
	display: flex;
	top: 0;
	justify-content: center;
	width: 100vw;
	height: 100vh;
}

.screen_content {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100%;
	height: fit-content;
	padding: 64px 32px;
	margin-top: 50px;
	background-color: var(--color00);
	border-radius: 5px;
}

.full_img {
	width: 90vw;
	background-color: rgb(19, 19, 20);
	border-radius: 5px;
}

.close_icon {
	transform: scale(1.3);
	position: fixed;
	cursor: pointer;
	right: 16px;
	top: 64px;
	z-index: 10;
}

@media (min-width: 420px) {
	.full_img {
		width: 70vw;
	}
}

@media (min-width: 650px) {
	.full_img {
		width: 60vw;
	}
	.screen_content {
		width: 80%;
	}
	.close_icon {
		right: calc(10vw + 16px);
	}
}

@media (min-width: 850px) {
	.full_img {
		width: 50vw;
	}
}

@media (min-width: 1000px) {
	.full_img {
		width: 420px;
		min-height: 420px;
	}
		.screen_content {
		width: 60%;
	}
	.close_icon {
		right: calc(20vw + 16px);
	}
}

@media (min-width: 960px) {
    main {
        padding: 16px 10%;
        grid-template-columns: 1fr 1fr 1fr;
        height: unset;
    }
    .image {
        width: 256px;
        height: 256px;
    }
}

@media (min-width: 1200px) {
    main {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .filters {
        padding: 26px 10%;
    }
}