/**
 * photogallery
 */

:root {
    --c-photogallery-item-width: 25%;
    --c-photogallery-item-height: calc(100% / 4 * 3);
}

.c-photogallery {
    display: grid; /* grid box */
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--c-photogallery-item-width) - 20px), 1fr)); /* grid box */
    grid-gap: 20px; /* grid box */
    margin: 0;
    padding: 0;
}

.c-photogallery__align-left {
    float: left;
    margin-right: /* $space_sub */20px;
    margin-bottom: /* $space_sub_x */10px;
}

.c-photogallery__align-right {
    float: right;
    margin-left: /* $space_sub */20px;
    margin-bottom: /* $space_sub_x */10px;
}

li.c-photogallery-item {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.c-photogallery-item-link,
.c-photogallery-item-img,
.c-photogallery-item-desc,
.c-photogallery-item-desc-link,
.c-photogallery-item-desc-title,
.c-photogallery-item-desc-subtitle {
    display: block;
}

.c-photogallery-item-link {
    position: relative;
    padding: 0 0 var(--c-photogallery-item-height) 0;
}

.c-photogallery-item-link[data-popup] {
    cursor: zoom-in;
}

.c-photogallery-item-link.lnk--popup::before,
.c-photogallery-item-link.lnk--popup::after {
    z-index: 1;
}

.c-photogallery-item-img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: 50% 50% no-repeat;
    background-size: cover;
}

.c-photogallery-item-desc {
    padding-top: /* $space_sub_x */10px;
    height: auto;
    line-height: 1.5;
    overflow-x: hidden;
}

.c-photogallery-item-desc-link {
    text-decoration: none;
}

.c-photogallery-item-desc-title {
    font-size: 12px;
    color: #444;
}

.c-photogallery-item-desc-subtitle {
    font-size: 11px;
    color: #808080;
}

.c-photogallery-item-desc-title + .c-photogallery-item-desc-subtitle {
    margin-top: 5px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    padding-top: 5px;
}

.c-photogallery-item-desc-link > .c-photogallery-item-desc-title {
    color: inherit;
}

/**
 * photogallery headlines (заголовки)
 */

.c-photogallery__headlines .c-photogallery-item {
    display: flex; /* flex box */
    flex-flow: column nowrap; /* flex box */
}

.c-photogallery__headlines .c-photogallery-item-desc {
    flex: 1; /* flex cell */
    padding: 10px 12px 15px;
    background: rgba(0, 0, 0, .05);
}

.c-photogallery__headlines .c-photogallery-item-desc-title {
    font-size: 14px;
}

.c-photogallery__headlines .c-photogallery-item-desc-title + .c-photogallery-item-desc-subtitle {
    margin-top: 10px;
    padding-top: 10px;
}

/**
 * photogallery slider
 */

.c-photogallery__slider {
    display: flex; /* flex box */
    gap: 10px; /* flex box */
    position: relative;
    padding-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
}

.c-photogallery__slider::-webkit-scrollbar {
    display: none;
}

.c-photogallery__slider .c-photogallery-item {
    min-width: 120px;
}

.c-photogallery__slider .lnk--popup::after,
.c-photogallery__slider .lnk--popup::before {
    display: none;
}

.c-photogallery__slider .c-photogallery-item-img {
    opacity: .35;
    cursor: pointer;
    transition: opacity .25s;
}
.c-photogallery__slider .c-photogallery-item-img:hover {
    opacity: 1;
}

.c-photogallery__slider .c-photogallery-item-img.c-photogallery-item-img__selected {
    opacity: 1;
}

.c-photogallery_slider {
    display: block;
    position: relative;
    margin-bottom: 10px;
    padding-top: 60%;
    width: 100%;
    background-position: center 33%;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}

.c-photogallery_slider > [data-content] {
    display: inline-block;
    position: absolute;
    bottom: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .75);
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    transition: color .25s;
}

.c-photogallery_slider > [data-content]:empty {
    display: none;
}

.c-photogallery_slider > [data-content="title"] {
    left: 10px;
    max-width: 80%;
}

.c-photogallery_slider > [data-content="counter"] {
    right: 10px;
    color: rgba(255, 255, 255, .5);
}

.c-photogallery_slider:hover > [data-content="counter"] {
    color: rgba(255, 255, 255, .75);
}

.c-photogallery_slider > button[data-nav] {
    display: inline-block;
    position: absolute;
    top: 50%;
    margin: 0;
    margin-top: -22px;
    border: none;
    border-radius: 50%;
    padding: 10px;
    box-sizing: content-box;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, .25);
    opacity: 0;
    cursor: pointer;
    transition: background-color .25s, opacity .25s;;
}

.c-photogallery_slider:hover > button[data-nav] {
    opacity: 1;
}

.c-photogallery_slider > button[data-nav="prev"] {
    left: 10px;
}

.c-photogallery_slider > button[data-nav="next"] {
    right: 10px;
}

.c-photogallery_slider > button[data-nav]::before {
    display: block;
    width: 100%;
    height: 100%;
    background: 0 0 no-repeat; /* image size: 24 x 24 */
    opacity: .5;
    content: "";
    transition: opacity .25s;
}

.c-photogallery_slider > button[data-nav="prev"]::before {
    background-image: url(../img/i_nav_prev.png);
}

.c-photogallery_slider > button[data-nav="next"]::before {
    background-image: url(../img/i_nav_next.png);
}

.c-photogallery_slider > button[data-nav]:hover {
    background: rgba(0, 0, 0, .5);
}

.c-photogallery_slider > button[data-nav]:hover::before {
    opacity: 1;
}

/**
 * photo
 */

.c-photo {
    display: inline-block;
}

.c-photo__align-left {
    display: block;
    float: left;
    margin-right: /* $space_sub */20px;
    margin-bottom: /* $space_sub_x */10px;
}

.c-photo__align-right {
    display: block;
    float: right;
    margin-left: /* $space_sub */20px;
    margin-bottom: /* $space_sub_x */10px;
}

.c-photo-link,
.c-photo-img,
.c-photo-desc {
    display: block;
}

.c-photo-link[data-popup] {
    cursor: zoom-in;
}

.c-photo-img {
    background: 50% 50% no-repeat;
    background-size: cover;
}

.c-photo-desc {
    padding-top: /* $space_sub_x */10px;
    line-height: 1.5;
    font-size: /* $font_size_small */11px;
    color: /* $color_gray */#808080;
}

@media (max-width: 480px) {
    .c-photogallery {
        grid-template-columns: repeat(auto-fit, minmax(calc(50% - 20px), 1fr));
    }
}