/* Списки в виде изображений --------------------------------------------------- 
    <div class="images-list">
        <figure>
            <a href="[ссылка]">
                <div><img src="[изображение]" /></div>
                <figcaption>[подпись под изображением]</figcaption>
            </a>
        </figure>
    </div> */
   
.images-list                        { --hover-duration: 0.5s }
                                    
.images-list                        { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1px; background: #1F2324 }
.images-list figure                 { position: relative; aspect-ratio: 3/2; margin: 0; overflow: hidden; display: flex; flex-direction: column }
.images-list figure:before          { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: radial-gradient(ellipse 65% 55% at 50% 80%, #575959, #1F2324); transition: transform var(--hover-duration); will-change: transform }
.images-list figure > a             { position: relative; display: block; width: 100%; height: 100%; text-align: center }
.images-list figure > a div         { position: absolute; left: 0; top: 0; width: 100%; height: 85%; display: flex; align-items: center; justify-content: center }
.images-list figure > a div img     { max-width: 65%; max-height: 80%; transition: transform var(--hover-duration); will-change: transform }
.images-list figure > a figcaption  { position: absolute; left: 0; bottom: 0; width: 100%; height: 35%; font-size: 21px; line-height: 28px; font-weight: 500; color: #CCC; display: flex; align-items: center; justify-content: center; padding: 0 20px; box-sizing: border-box; transition: transform var(--hover-duration), color var(--hover-duration); will-change: transform, color }

.images-list figure.with-extra-line > a     { height: 87% }
.images-list figure.with-extra-line > div   { height: 13%; position: relative; display: flex; align-items: flex-start; justify-content: center; width: 100%; padding: 0 20px; box-sizing: border-box }
.images-list figure.with-extra-line > div a { font-size: 13px; line-height: 16px; border-bottom: 1px solid transparent; transition: border-color 0.2s; will-change: border-bottom }
.images-list figure.with-extra-line > div a:hover  { text-decoration: none }
.images-list figure.with-extra-line > a figcaption { height: 30% }

.images-list:not(.mobile) figure:hover:before                  { transform: scale(1.4) }
.images-list:not(.mobile) figure:hover > a div img             { transform: scale(1.05) }
.images-list:not(.mobile) figure:hover > a figcaption          { transform: translateY(5%); color: #FFF }
.images-list:not(.mobile) figure.with-extra-line > div a:hover { border-color: #E68F00 }

@media screen and (max-width: 2559px) {
    .images-list                        { grid-template-columns: repeat(4, 1fr) }
}
@media screen and (max-width: 1919px) {
    .images-list figure > a figcaption  { font-size: 18px; line-height: 25px; }
}
@media screen and (max-width: 1365px) {
    .images-list figure > a figcaption  { font-size: 16px; line-height: 21px }
}
@media screen and (max-width: 1279px) {
    .images-list                        { grid-template-columns: repeat(3, 1fr) }
    .images-list figure > a figcaption  { font-size: 18px; line-height: 25px; }
}
@media screen and (max-width: 1151px) {
    .images-list figure > a figcaption  { font-size: 16px; line-height: 21px }
}
@media screen and (max-width: 1023px) {
    .images-list                        { grid-template-columns: repeat(2, 1fr) }
    .images-list figure > a figcaption  { font-size: 21px; line-height: 28px; }
}
@media screen and (max-width: 895px) {
    .images-list figure > a figcaption  { font-size: 18px; line-height: 25px }
}
@media screen and (max-width: 767px) {
    .images-list figure > a figcaption  { font-size: 16px; line-height: 21px }
}
@media screen and (max-width: 639px) {
    .images-list figure > a figcaption  { font-size: 14px; line-height: 18px }
    .images-list figure.with-extra-line > div a { font-size: 12px; line-height: 14px }
}
@media screen and (max-width: 567px) {
    .images-list                        { grid-template-columns: repeat(1, 1fr) }
    .images-list figure > a figcaption  { font-size: 21px; line-height: 28px; }
    .images-list figure.with-extra-line > div a { font-size: 13px; line-height: 16px }
}
@media screen and (max-width: 479px) {
    .images-list figure > a figcaption  { font-size: 18px; line-height: 25px }
}
@media screen and (max-width: 359px) {
    .images-list figure > a figcaption  { font-size: 16px; line-height: 21px }
}



/* Примеры работ */
.examples .images-list                      { grid-gap: 0 }
.examples .images-list figure > a div       { height: 100% }
.examples .images-list figure > a div img   { max-width: 101%; max-height: 101%; }



/* Свободная объединённая ячейка к самом конце */
.images-list div.empty-item         { background: url(/media/general/empty-grid-item-bg.jpg) no-repeat bottom; background-size: cover; position: relative;

    --s-content:  "Нет нужного продукта? Изготовим по Вашему чертежу!";
    --m-content:  "Если Вы не\00a0нашли нужного продукта, мы\00a0изготовим его\00a0по\00a0Вашему чертежу!";
    --l-content:  "Если Вы не\00a0нашли нужного продукта, мы\00a0изготовим его\00a0по\00a0Вашему чертежу! Из\00a0качественных материалов и\00a0в\00a0очень быстрые сроки.";
    --xl-content: "Если Вы не\00a0нашли нужного продукта, мы\00a0изготовим его\00a0по\00a0Вашему чертежу! Из\00a0качественных материалов, в\00a0соответствии с\00a0самыми современными стандартами и\00a0требованиями и\00a0в\00a0очень быстрые сроки.";
}
.images-list div.empty-item:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #FFF; padding: 50px 30px 0 50px; box-sizing: border-box; font-size: 22px; line-height: 44px; content: var(--xl-content) }

.images-list div.empty-item.span-3:before,
.images-list div.empty-item.span-4:before { padding: 100px 60px 0 100px }

.images-list div.empty-item.span-1:before { content: var(--l-content) }

@media screen and (max-width: 2559px) {
    .images-list div.empty-item.span-3:before { font-size: 20px; line-height: 40px }
    .images-list div.empty-item.span-2:before { font-size: 20px; line-height: 40px }
    .images-list div.empty-item.span-1:before { font-size: 18px; line-height: 36px }
}
@media screen and (max-width: 1919px) {
    .images-list div.empty-item.span-3:before { padding-top: 50px; font-size: 18px; line-height: 36px }
    .images-list div.empty-item.span-2:before { font-size: 18px; line-height: 36px }
    .images-list div.empty-item.span-1:before { content: var(--m-content) }
}
@media screen and (max-width: 1599px) {
    .images-list div.empty-item.span-3:before { padding: 50px 30px 0 50px; font-size: 16px; line-height: 32px }
    .images-list div.empty-item.span-2:before { font-size: 16px; line-height: 32px }
}
@media screen and (max-width: 1439px) {
    .images-list div.empty-item.span-3:before { font-size: 15px; line-height: 30px }
    .images-list div.empty-item.span-2:before { font-size: 15px; line-height: 30px }
    .images-list div.empty-item.span-1:before { font-size: 16px; line-height: 32px }
}
@media screen and (max-width: 1365px) {
    .images-list div.empty-item.span-2:before { content: var(--l-content) }
}
@media screen and (max-width: 1279px) {
    .images-list div.empty-item.span-3:before { content: var(--l-content) }
    .images-list div.empty-item.span-2:before { padding-top: 35px }
    .images-list div.empty-item.span-1:before { padding-top: 35px; padding-left: 35px; content: var(--s-content); font-size: 14px; line-height: 26px }
}
@media screen and (max-width: 1023px) {
    .images-list div.empty-item.span-2:before { content: var(--l-content) }
}
@media screen and (max-width: 767px) {
    .images-list div.empty-item.span-1:before { content: var(--m-content); font-size: 16px; line-height: 32px }
}
@media screen and (max-width: 639px) {
    .images-list div.empty-item.span-1:before { content: var(--s-content); font-size: 14px; line-height: 26px }
}