:root {

    --animation-duration: 416.708ms;


   

    --figma-spring:
        linear(
            0,
            0.291 10%,
            0.611 20%,
            0.800 30%,
            0.900 40%,
            0.950 50%,
            0.976 60%,
            0.989 70%,
            0.995 80%,
            0.998 90%,
            1 100%
        );

}




.vote-page {

    width: 100%;

    min-height: 1125.284px;

    background: #000000;

    overflow-x: hidden;

}





.vote-header {

    position: relative;

    width: 100%;

    height: 132.284px;

}


.proplan-logo {

    position: absolute;

    left: 50%;

    top: 24px;


    width: 182px;

    height: 84.284px;


    transform:
        translateX(-50%);


    object-fit: fill;

}





.vote-content {

    position: relative;


    width: 100%;

    max-width: 1440px;


    height: 983px;


    margin:

        10px
        auto
        0;

}




.vote-title {

    position: absolute;


    top: 37px;

    left: 50%;


    width: 241px;

    height: 28px;


    margin: 0;


    transform:
        translateX(-50%);


    white-space: nowrap;


    text-align: center;


    font-size: 24px;

    line-height: 1;


    font-weight: 400;


    letter-spacing: 0;

}


.vote-title span {

    font-weight: 400;

}


.vote-title strong {

    font-weight: 900;

}





.cats-grid {

    position: absolute;


    top: 65px;

    left: 50%;


    transform:
        translateX(-50%);


    width: 1440px;

    height: 881px;


    padding:

        37px
        108.5px;


    display: grid;


    grid-template-columns:

        repeat(
            4,
            281px
        );


    grid-template-rows:

        repeat(
            2,
            387px
        );


    column-gap: 33px;

    row-gap: 33px;


    background: #000000;

}





.cat-card {

    position: relative;


    width: 281px;

    height: 387px;


    overflow: visible;


    z-index: 1;

}


.cat-card:hover,
.cat-card:focus-within {

    z-index: 20;

}





.cat-visual {

    position: absolute;


    left: 0;

    top: 0;


    width: 281px;

    height: 387px;


    border:

        1px
        solid
        rgba(
            255,
            255,
            255,
            0.15
        );


    border-radius:
        15.357px;


    overflow: hidden;


    background:
        #0c0c0c;


    transition:

        left
        var(--animation-duration)
        var(--figma-spring),

        top
        var(--animation-duration)
        var(--figma-spring),

        width
        var(--animation-duration)
        var(--figma-spring),

        height
        var(--animation-duration)
        var(--figma-spring),

        border-radius
        var(--animation-duration)
        var(--figma-spring),

        border-width
        var(--animation-duration)
        var(--figma-spring);


    will-change:

        left,
        top,
        width,
        height;

}


.cat-card:hover
.cat-visual,

.cat-card:focus-within
.cat-visual {

    left: -15px;

    top: -20.658px;


    width: 311px;

    height: 428.317px;


    border-radius:
        16.997px;


    border-width:
        1.107px;

}





.cat-photo {

    position: absolute;


    inset: 0;


    width: 100%;

    height: 100%;


    object-fit: cover;

    object-position: center;

}





.cat-bottom {

    position: absolute;


    left: 0;

    top: 252px;


    width: 281px;

    height: 135px;


    background:

        linear-gradient(
            to bottom,

            rgba(
                12,
                12,
                12,
                0
            )
            0%,

            rgba(
                12,
                12,
                12,
                1
            )
            79.652%,

            #0c0c0c
            100%
        );


    transition:

        top
        var(--animation-duration)
        var(--figma-spring),

        width
        var(--animation-duration)
        var(--figma-spring),

        height
        var(--animation-duration)
        var(--figma-spring);

}


.cat-card:hover
.cat-bottom,

.cat-card:focus-within
.cat-bottom {

    top: 278.904px;


    width: 311px;

    height: 149.413px;

}





.cat-info {

    position: absolute;


    z-index: 1;


    left: 20px;

    top: 48px;


    width: 89px;

    height: 67px;


    transition:

        left
        var(--animation-duration)
        var(--figma-spring),

        top
        var(--animation-duration)
        var(--figma-spring),

        width
        var(--animation-duration)
        var(--figma-spring),

        height
        var(--animation-duration)
        var(--figma-spring);

}


.cat-label {

    position: absolute;


    left: 0;

    top: 0;


    margin: 0;


    white-space: nowrap;


    font-size:
        15.248px;


    line-height: 1;


    font-weight: 400;


    transition:

        font-size
        var(--animation-duration)
        var(--figma-spring);

}


.cat-number {

    position: absolute;


    left: 0;

    top: 11px;


    margin: 0;


    white-space: nowrap;


    font-size: 48px;


    line-height: 1;


    font-weight: 100;


    letter-spacing:
        -0.07em;


    transition:

        top
        var(--animation-duration)
        var(--figma-spring),

        font-size
        var(--animation-duration)
        var(--figma-spring);

}




.cat-card:hover
.cat-info,

.cat-card:focus-within
.cat-info {

    left: 22.135px;

    top: 53.125px;


    width: 98.502px;

    height: 74.153px;

}


.cat-card:hover
.cat-label,

.cat-card:focus-within
.cat-label {

    font-size:
        16.875px;

}


.cat-card:hover
.cat-number,

.cat-card:focus-within
.cat-number {

    top:
        12.174px;


    font-size:
        53.125px;

}





.vote-button {

    position: absolute;


    z-index: 2;


    left: 201px;

    top: 55px;


    width: 60px;

    height: 60px;


    padding: 0;


    overflow: hidden;


    cursor: pointer;


    border:

        1px
        solid
        rgba(
            255,
            255,
            255,
            0.22
        );


    border-radius:
        8px;


  

    background:

        linear-gradient(
            215.6deg,

            #a38752
            0%,

            #deb972
            47.596%,

            #a38752
            100%
        );


    box-shadow:

        0
        4px
        7.3px
        rgba(
            0,
            0,
            0,
            0.41
        );


    transition:

        left
        var(--animation-duration)
        var(--figma-spring),

        top
        var(--animation-duration)
        var(--figma-spring),

        width
        var(--animation-duration)
        var(--figma-spring),

        height
        var(--animation-duration)
        var(--figma-spring),

        border-radius
        var(--animation-duration)
        var(--figma-spring),

        box-shadow
        var(--animation-duration)
        var(--figma-spring);

}





.cat-card:hover
.vote-button,

.cat-card:focus-within
.vote-button {

    left:
        16.601px;


    top:
        59.765px;


    width:
        277.797px;


    height:
        73.046px;


    border-radius:
        8.854px;


    box-shadow:

        0
        4.427px
        8.079px
        rgba(
            0,
            0,
            0,
            0.41
        );

}





.vote-button-text {

    position: absolute;


    left:
        66.336px;


    top:
        23.523px;


    width:
        92px;


    height:
        26px;


    color:
        #0c0c0c;


    white-space: nowrap;


    font-size:
        22.135px;


    line-height: 1;


    font-weight: 500;


    opacity: 0;


    transition:

        opacity
        120ms
        ease
        90ms;

}


.cat-card:hover
.vote-button-text,

.cat-card:focus-within
.vote-button-text {

    opacity: 1;

}





.vote-star {

    position: absolute;


    left: 11px;

    top: 11px;


    width: 38px;

    height: 36.502px;


    transition:

        left
        var(--animation-duration)
        var(--figma-spring),

        top
        var(--animation-duration)
        var(--figma-spring),

        width
        var(--animation-duration)
        var(--figma-spring),

        height
        var(--animation-duration)
        var(--figma-spring);

}


.cat-card:hover
.vote-star,

.cat-card:focus-within
.vote-star {

    left:
        169.404px;


    top:
        15.495px;


    width:
        42.057px;


    height:
        40.399px;

}




.vote-button:focus-visible {

    outline:

        2px
        solid
        #ffffff;


    outline-offset:
        3px;

}


@media
(max-width: 1279px) {

    .vote-content {

        height: auto;

        min-height: 1400px;

    }


    .cats-grid {

        position: relative;


        top: 100px;

        left: 50%;


        width: 909px;

        height: auto;


        padding:

            37px
            0;


        grid-template-columns:

            repeat(
                3,
                281px
            );


        grid-template-rows:
            none;


        grid-auto-rows:
            387px;

    }


    .vote-title {

        top: 37px;

    }

}





@media
(max-width: 960px) {

    .cats-grid {

        width: 595px;


        grid-template-columns:

            repeat(
                2,
                281px
            );

    }

}




@media
(max-width: 620px) {

    .vote-header {

        height: 112px;

    }


    .proplan-logo {

        top: 18px;


        width: 145px;

        height: auto;

    }


    .vote-content {

        margin-top: 0;


        min-height: 3500px;

    }


    .vote-title {

        top: 20px;


        width: auto;


        font-size: 22px;

    }


    .cats-grid {

        top: 70px;


        width: 281px;


        padding:

            24px
            0;


        grid-template-columns:
            281px;


        gap: 24px;

    }

}