/* СБРОС СТИЛЕЙ */
* { margin: 0px; 
    padding: 0px;
    box-sizing: border-box;                                                                         
    font-size: 0;
}


/* ПЕРЕМЕННЫЕ */
:root {
    --index : calc((1vh + 1vw) * 30);        
    --transition : cubic-bezier(.17,.67,.83,.67);
}


/* --- */
body {
    background-color: black;
}

.wrapper {
    display: flex;
    height: 100vh;
    padding: 0 10%;
}    
    
.items {        
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    perspective: calc(var(--index) * 1.5);
}
    
.item {
    width: calc(0.3125 * var(--index));                                                                /* расчёт ширины в принципе не важен, так как управление возьмёт на себя flexbox */
    height: calc(0.6875 * var(--index));
    background-size: auto 100%; 
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    flex: 1 1 auto;
    filter: grayscale(70%) brightness(0.7);
    transition: transform 2.25s var(--transition), filter 3.25s var(--transition), width 1.25s;        /* в переменной кубик-безье */
    will-change: transform, filter, width;
}    
 
.item1 { background-image: url(../../pictures/2024/9_мая/1_9may.jpg); background-size: auto 100%; background-position: 50% 50%; border-radius: 10px 0 0 10px; }
.item2 { background-image: url(../../pictures/2024/выборы_президента_2024/3_president.jpg); background-size: auto 100%; background-position: 50% 50%; }
.item3 { background-image: url(../../pictures/2024/выставка_россия_вднх_2024/7_vdnh.jpg); background-size: auto 100%; background-position: 50% 50%; }
.item4 { background-image: url(../../pictures/2024/кисловодск/бадукские_озёра/21_baduk_lakes.jpg); background-size: auto 100%; background-position: 50% 50%; }               
.item5 { background-image: url(../../pictures/2024/кисловодск/домбай/86_dombai.jpg); background-size: auto 100%; background-position: 50% 50%; }
.item6 { background-image: url(../../pictures/2024/кулиги/2_kuligi.jpg); background-size: auto 100%; background-position: 50% 50%; }
.item7 { background-image: url(../../pictures/2024/лека/26_leka.jpg); background-size: auto 100%; background-position: 50% 50%; }
.item8 { background-image: url(../../pictures/2024/переславль/33_pereslavl.jpg); background-size: auto 100%; background-position: 50% 50%; }
.item9 { background-image: url(../../pictures/2024/тула/35_tula.jpg); background-size: auto 100%; background-position: 50% 50%; }
.item10 { background-image: url(../../pictures/2024/спорт/2_sport.jpg); background-size: auto 100%; background-position: 50% 50%; }
.item11 { background-image: url(../../pictures/2024/суздаль/13_suzdal.jpg); background-size: auto 100%; background-position: 50% 50%; }
.item12 { background-image: url(../../pictures/2024/электросталь/1_electrostal.jpg); background-size: auto 100%; background-position: 50% 50%; border-radius: 0 10px 10px 0; }
        
/* функционал волны */
.item:has( + * + :hover) {
    transform: translateZ(100px);
}
.item:has( + :hover) {
    filter: inherit;                                            /* сбросим фильтр, который идёт для класса item */
    transform: translateZ(150px) rotateY(30deg);
}
.item:hover {                                                    
    filter: inherit;                                            /* сбросим фильтр, который идёт для класса item */
    transform: translateZ(200px) rotateY(30deg);
}               
.item:hover + * { 
    filter: inherit;                                            /* сбросим фильтр, который идёт для класса item */
    z-index: -1;
    transform: translateZ(150px) rotateY(30deg);
}
.item:hover + * + * { 
    z-index: -2;
    transform: translateZ(100px);
}
        
/* уберём пробелы из волны */
.no-whitespace-container {
    position: relative;
}
.no-whitespace-int::before {                                    /* создадим невидимую полосу шириной 30px перед картинкой */
    content: "";
    position: absolute;
    height: 100%;
    width: 30px;
    left: -30px;
}
.no-whitespace-int::after {                                     /* создадим невидимую полосу шириной 30px после картинки */
    content: "";
    position: absolute;
    height: 100%;
    width: 30px;
    right: -30px;
}

/* расширение активной картинки */
.item:hover {
    width: 50vw;
    z-index: 100;
}

/* ссылки */
.no-whitespace-int {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
a {
    font-size: 20px;
    font-style: italic;
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 10%;
    width: 100%;
    color: white;
    text-shadow: 2px 2px black;
    transform: rotate(-90deg);
    will-change: transform;
}
a:hover {
    transform: rotate(0deg);
    height: 100%;
    font-size: 30px;
    border: 10px solid white;
}