:root {
	font-family: "Montserrat", sans-serif;
	font-size: clamp(12px, 1.25vw, 16px);
	font-weight: 200;
	font-style: normal;

	--fz-h1: 2rem;
	--fz-h2: 2rem;
	--fz-h3: 1.5rem;
	--fz-h4: 1.25rem;
	--fz-h5: 1rem;
	--fz-h6: .8rem;

	--c-dark: 17 21 26;
}

* {
	box-sizing: border-box;
}

body {
	background-color: rgba(var(--c-dark) / 1);
	color: rgba(255 255 255 / 1);

	margin: unset;

	overflow-y: hidden;
}
body.noscroll {
	overflow-y: hidden;
}

:first-child {
	margin-top: unset;
}
:last-child {
	margin-bottom: unset;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 200;
}

h1 {
	font-size: var(--fz-h1);
}
h2 {
	font-size: var(--fz-h2);
}
h3 {
	font-size: var(--fz-h3);
}
h4 {
	font-size: var(--fz-h4);
}
h5 {
	font-size: var(--fz-h5);
}
h6 {
	font-size: var(--fz-h6);
}

picture, img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    object-fit: cover;
}

.container {
    max-width: calc(1200px + 2px);
    padding-inline: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-inline: auto;
}

*, :before, :after {
    box-sizing: border-box;
}



.gallery {
/*    height: calc(100svh - (var(--fz-h2) * 2));*/
    height: 100svh;
    overflow-y: auto;
}
.gallery__list {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    --gallery-columns: 3;
}

.gallery__list > * {
    flex: unset;
    width: calc((100% - 2px * (var(--gallery-columns) - 1)) / var(--gallery-columns));
}

.album__cover {
    position: relative;
    padding-bottom: calc(100% / 4 * 5);
}

.album__cover > * {
    position: absolute;
    top: 0;
    left:  0;
}
.album__cover > *, .album__cover picture, .album__cover img {
	width: 100%;
	height: 100%;
}

.album {
	position: relative;
}
.album__count {

	--count-w: 2em;
	--count-h: 2.5em;
	--count-shift: .1em;

    position: absolute;
    top: calc(var(--count-shift) * 6);
    right: calc(var(--count-shift) * 6);
    width: var(--count-w);
    height: var(--count-h);
    color: rgba(255 255 255 / .75);
    background-color: rgba(var(--c-dark) / .35);
    border-radius: calc(var(--count-shift) * 2) 0 calc(var(--count-shift) * 2) 0;
}

.album__count .value {
    width: var(--count-w);
    height: var(--count-h);
    position: absolute;
    border-radius: calc(var(--count-shift) * 2);
/*    padding: .25em 0 0 .25em;*/
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.album__count::before,
.album__count::after {
    content: "";
    position: absolute;
    display: block;
    border: solid .5px rgb(255 255 255 / .5);
    border-radius: calc(var(--count-shift) * 2);
    width: calc(var(--count-w) + var(--count-shift) * 2);
    height: calc(var(--count-h) + var(--count-shift) * 2);
    z-index: 0;
}
.album__count::before {
    left: 0em;
    top: 0em;
}
.album__count::after {
    left: calc(var(--count-shift) * -2);
    top: calc(var(--count-shift) * -2);
}


.album__count {
    position: absolute;
    top: .5em;
    left: unset;
    right: .25em;
    width: unset;
    height: unset;
    text-align: right;
    bottom: unset;
    padding: .25em .755em;
    background-color: rgba(var(--c-dark) / .33);
    color: unset;
    border-radius: unset;
}
.album__count::before, .album__count::after {
    content: unset;
}
.album__count .value {
    position: unset;
    width: unset;
    height: unset;
    display: flex;
    gap: .25em;
    align-items: flex-end;
}
.album__count .value::after {
    content: "фото ";
    text-transform: uppercase;
    font-size: .75em;
    padding-bottom: .09em;
}


.gallery .album__title h2 {
    font-size: 1rem;
}

.gallery .album__title {
    position: absolute;
    left: .25em; 
    bottom: .5em;
    padding: .25em .755em;
    background-color: rgba(var(--c-dark) / .33);
}



.album__count, .gallery .album__title {
    backdrop-filter: blur(4px);
}






.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100svh;
    padding: 2px;
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
    background-color: rgba(var(--c-dark) / .95);
    left: -100vw;
    opacity: 0;
    z-index: 1;

    animation-duration: .3s;
    animation-fill-mode: forwards;
}

.modal.modal_active {
    animation-name: modal-open;
}
.modal.modal_hidden {
    animation-name: modal-close;
}



.modal {
    overflow-y: auto;
}
.modal__container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--fz-h2) * 2);
/*    padding-bottom: calc(var(--fz-h2) * 2);*/
}
.modal__header {
    position: fixed;
    background-color: rgba(var(--c-dark) / .75);
    width: 100%;
    display: flex;
    font-size: var(--fz-h2);
    padding: .5em;
    padding-left: 2.5em;
    gap: 1em;
    top: 0;
    left: 0;
}
.modal:not(.modal_active) .modal__header {
	display: none;
}
.modal__exit {
    font-size: var(--fz-h2);
    width: 1em;
    height: 1em;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    position: relative;
}

.modal .album__title {
    width: calc(100% - 2em);
    line-height: 1;
    text-align: center;
}

.modal .album__title {
	color: rgba(255 255 255 / .75);
}

.modal__exit::before, .modal__exit::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    top: 50%;
    left: 50%;
    background-color: rgba(255 255 255 / .75);
}

.modal__exit::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal__exit::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


.modal picture, .modal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modal .album__items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.modal {
/*    height: calc(100svh - (var(--fz-h2) * 2));*/
    height: 100svh;
}
@keyframes modal-open {
	0% {
		left: -99999vw;
		opacity: 0;
	}
	1% {
		left: 0;
		opacity: 0;
	}
	100% {
		left: 0;
		opacity: 1;
	}
}

@keyframes modal-close {
	100% {
		left: -99999vw;
		opacity: 0;
	}
	99% {
		left: 0;
		opacity: 0;
	}
	0% {
		left: 0;
		opacity: 1;
	}
}