#lot-list {
    flex-grow: 1;
    box-sizing: border-box;

    .lot-list__filters-block {
        box-sizing: border-box;
        padding: 45px 20px;
        border-bottom: 1px solid rgba(186, 141, 97, 1);
        border-top: 1px solid rgba(186, 141, 97, 1);
        background: linear-gradient(266.00deg, rgba(33, 47, 67, 1) 0%,rgba(20, 24, 30, 1) 100%);
    }

    .lot-list__filter-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        justify-content: center;

        .vostok-label {
            min-width: 300px;
        }
    }

    .lot-list__filter-quick-filters {
        width: 100%;
        padding: 0 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 26px;
        justify-content: center;

        a {
            display: block;
            border-radius: 30px;
            background: linear-gradient(135.00deg, rgba(232, 224, 213, 1) 0%,rgba(212, 197, 160, 1) 30%,rgba(245, 236, 215, 1) 60%,rgba(201, 184, 146, 1) 80%,rgba(223, 216, 199, 1) 100%);
            color: var(--black, rgba(23, 32, 48, 1));
            font-family: "Roboto";
            font-size: 20px;
            font-weight: 400;
            line-height: 20px;
            text-decoration: none;
            padding: 10px 16px;
            position: relative;
            transition: padding 0.1s ease-in;

            &:after {
                content: '';
                width: 20px;
                height: 20px;
                top: 10px;
                right: 10px;
                display: block;
                position: absolute;
                background: center center url("/static/images/icons/clear.svg") no-repeat;
                opacity: 0;
                transition: all 0.1s ease-in;
            }

            &.-active {
                background: linear-gradient(132.37deg, rgba(146, 36, 0, 1) 1%,rgba(255, 113, 4, 1) 93%);
                color: rgba(217, 215, 209, 1);
                font-family: "Roboto";
                padding-right: 44px;

                &:after {
                    opacity: 1;
                }
            }
        }
    }
}

#lot-list-horses {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: rgba(233, 228, 213, 1);
    position: relative;
    min-height: 680px;

    #lot-list-horses-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 70px 20px;
        gap: 50px;
        flex-grow: 1;
        flex-wrap: wrap;
    }

    #lot-list-horses-loader {
        background: rgba(233, 228, 213, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease-in;

        &.-show {
            pointer-events: all;
            opacity: 1;
        }

        .horseshoes {
            animation: logoHorseshoesBreeathing 4s linear infinite; 
            transform-box: fill-box; 
            transform-origin: center;
        }

        .lot-list__loader-wrapper {
            width: 200px;
            height: 198.823px;
        }
    }

    .lot-list__lot-no-data {
        background: rgba(255, 255, 255, 0.2) no-repeat center 78px url("/static/images/lot-no-data.svg");
        max-width: 600px;
        flex-grow: 1;
        height: 540px;
        color: rgba(67, 87, 122, 1);
        font-family: "Roboto";
        font-size: 20px;
        font-weight: 300;
        line-height: 28px;
        letter-spacing: 1px;
        text-align: center;
        text-transform: uppercase;
        box-sizing: border-box;
        padding: 402px 20px 0 20px;
    }

    .lot-list__lot-item {
        width: 320px;
        height: 586px;
        border: 1px solid rgba(186, 141, 97, 1);
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        padding-top: 464px;
        text-decoration: none;

        .lot-list__lot-item-img-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 318px;
            height: 392px;
        }

        .lot-list__lot-item-img {
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 294px;
            height: 368px;
            transition: width 0.3s cubic-bezier(0, 0, 0, 1), height 0.3s cubic-bezier(0, 0, 0, 1);
            overflow: hidden;

            &.-none {
                background-size: 90%;
            }
        }

        .lot-list__lot-item-polaroid {
            top: 0;
            left: 0;
            right: 0;
            position: absolute;
            height: 465px;
            box-sizing: border-box;
            background: rgba(255, 255, 255, 0.7);
            transition: height 0.4s cubic-bezier(0.42, 0, 0.12, 0.99), background 0.3s cubic-bezier(0.42, 0, 0.18, 0.99);
        }

        &:hover {
            .lot-list__lot-item-img {
                width: 320px;
                height: 392px;
            }

            .lot-list__lot-item-polaroid {
                height: 586px;
                background: rgba(255, 255, 255, 1);
            }
        }

        .lot-list__lot-item-price-wrapper {
            z-index: 100;
            position: absolute;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(232, 224, 213, 1);
            border-right: 1px solid rgba(232, 224, 213, 1);
            border-top: 1px solid rgba(232, 224, 213, 1);
            box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.25);
            background: var(--orange, linear-gradient(132.37deg, rgba(146, 36, 0, 1) 1%,rgba(255, 113, 4, 1) 93%));
            padding: 8px 16px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            top: 350px;
            left: 0;
            gap: 10px;
        }

        .lot-list__lot-item-price-label {
            opacity: 0.4;
            color: rgba(217, 215, 209, 1);
            font-family: "Roboto";
            font-size: 9px;
            font-weight: 500;
            line-height: 12px;
            letter-spacing: 0px;
            text-align: center;
            text-transform: uppercase;
            text-wrap: wrap;
        }

        .lot-list__lot-item-price-value {
            font-family: "PT Serif Caption", serif;
            font-size: 24px;
            font-weight: 400;
            line-height: 32px;

            span {
                background: linear-gradient(135.00deg, rgba(232, 224, 213, 1) 0%,rgba(212, 197, 160, 1) 30%,rgba(245, 236, 215, 1) 60%,rgba(201, 184, 146, 1) 80%,rgba(223, 216, 199, 1) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
        }

        .lot-list__lot-item-main-info {
            display: flex;
            flex-direction: row;
            padding: 0 12px;
            gap: 32px;
        }

        .lot-list__lot-item-number {
            font-family: "Roboto";
            font-size: 32px;
            font-weight: 300;
            line-height: 48px;
            position: relative;
            height: 72px;
            display: flex;
            align-items: center;

            span {
                background: linear-gradient(128.42deg, rgba(185.5, 141, 97, 1) 11%,rgba(222.06, 193.64, 164.26, 1) 40%,rgba(222.27, 193.95, 164.66, 1) 56%,rgba(173, 123, 74, 1) 76%,rgba(198, 159, 120, 1) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            &:after {
                content: '';
                display: block;
                border-left: 1px solid rgba(198, 204, 215, 1);
                height: 44px;
                top: 14px;
                right: -16px;
                position: absolute;
            }
        }

        .lot-list__lot-item-name {
            font-family: "PT Serif Caption", serif;
            font-size: 28px;
            font-weight: 400;
            line-height: 30px;
            flex-grow: 1;
            display: flex;
            align-items: center;

            span {
                background: linear-gradient(128.42deg, rgba(185.5, 141, 97, 1) 11%,rgba(222.06, 193.64, 164.26, 1) 40%,rgba(222.27, 193.95, 164.66, 1) 56%,rgba(173, 123, 74, 1) 76%,rgba(198, 159, 120, 1) 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }
        }

        .lot-list__lot-item-param {
            &.-breed {
                grid-area: breed;
            }

            &.-discipline {
                grid-area: discipline;
            }

            &.-gender {
                grid-area: gender;
            }

            &.-height_cm {
                grid-area: height_cm;
            }

            &.-age {
                grid-area: age;
            }
        }

        .lot-list__lot-item-params {
            padding: 12px;
            position: relative;
            display: grid;
            gap: 20px;
            grid-template-columns: repeat(3,1fr);
            grid-template-areas:
                "breed breed discipline"
                "gender height_cm age";
        }

        .lot-list__lot-item-param-name {
            color: rgba(173, 52, 8, 1);
            font-family: "Roboto";
            font-size: 11px;
            font-weight: 300;
            line-height: 16px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .lot-list__lot-item-param-value {
            color: rgba(23, 32, 48, 1);
            font-family: "Roboto";
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
        }
    }
}