.girls-reviews {
    --sqrt--3					: 1.73205080757;
    --hexagon--width			: 250px;
    --hexagon--height			: calc(var(--hexagon--width) / var(--sqrt--3) * 2);
    --hexagon--half--width		: calc(var(--hexagon--width) / 2);
    --hexagon--half--height		: calc(var(--hexagon--height) / 2);
    --unit--width				: calc(var(--hexagon--width) / 10);
    --unit--height				: calc(var(--hexagon--height) / 10);
    --chart--width--a			: var(--hexagon--half--width);
    --chart--width--b			: calc(var(--hexagon--half--width) + var(--unit--width) * var(--review--b));
    --chart--width--c			: calc(var(--hexagon--half--width) + var(--unit--width) * var(--review--c));
    --chart--width--d			: var(--hexagon--half--width);
    --chart--width--e			: calc(var(--hexagon--half--width) - var(--unit--width) * var(--review--e));
    --chart--width--f			: calc(var(--hexagon--half--width) - var(--unit--width) * var(--review--f));
    --chart--height--a			: calc(var(--hexagon--half--height) - var(--unit--height) * var(--review--a));
    --chart--height--b			: calc(var(--hexagon--half--height) - (var(--unit--height) * var(--review--b)) / 2);
    --chart--height--c			: calc(var(--hexagon--half--height) + (var(--unit--height) * var(--review--c)) / 2);
    --chart--height--d			: calc(var(--hexagon--half--height) + var(--unit--height) * var(--review--d));
    --chart--height--e			: calc(var(--hexagon--half--height) + (var(--unit--height) * var(--review--e)) / 2);
    --chart--height--f			: calc(var(--hexagon--half--height) - (var(--unit--height) * var(--review--f)) / 2);
    --star--gradient            : linear-gradient(to right, #555555 0% 50%, #f9b919 50% 100%);
    width                       : min(100%, 960px);
    margin                      : 0 auto;
    padding                     : 0 10px;
    display                     : grid;
    grid-template-columns       : 1fr;
    justify-content             : center;
    align-items                 : center;
}
.girls-reviews .graph {
    width                       : min(100%, 400px);
    height                      : min(100%, 400px);
    margin                      : 60px auto;
    background                  : var(--white_2);
    border-radius               : 5px;
    display                     : flex;
    justify-content             : center;
    align-items                 : center;
}
.girls-reviews .table {
    margin-top                  : 20px;
    border-radius               : 5px;
    overflow                    : hidden;
}
.girls-reviews .table dl {
    border-top                  : 1px solid var(--black_4);
    display                     : grid;
    grid-template-columns       : 7em 1fr;
    justify-content             : center;
    align-items                 : center;
}
.girls-reviews .table dl:first-of-type {
    border                      : none;
}
.girls-reviews .table dt {
    width                       : 100%;
    height                      : 100%;
    padding                     : 10px;
    background                  : var(--white_2);
    font-size                   : .8rem;
    display                     : flex;
    justify-content             : center;
    align-items                 : center;
}
.girls-reviews .table dd {
    padding                     : 10px;
    background                  : var(--white_1);
    text-align                  : center;
    display                     : grid;
    grid-template-columns       : minmax(6em, 20%) 1fr;
}
.girls-reviews .table dd > div > strong {
    font-size                   : 1.5rem;
    display                     : block;
}
.girls-reviews .table dd > div > span {
    font-size                   : .8rem;
    display                     : block;
}
.girls-reviews .table dd > ol {
    overflow                    : hidden;
    display                     : flex;
    justify-content             : center;
    flex-flow                   : column;
    gap                         : 5px;
}
.hexagon-radar-chart {
    width						: var(--hexagon--width);
    height						: var(--hexagon--height);
    padding                     : 0;
    position                    : relative;
}
.hexagon-radar-chart::before {
    content                     : "";
    width                       : 100%;
    height                      : 100%;
    background                  : var(--theme_main);
    opacity                     : .7;
    display                     : block;
    position                    : absolute;
    top                         : 0;
    left                        : 0;
    animation                   : stretchHexagon 3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes stretchHexagon {
    0% {
        clip-path               : polygon(
            var(--hexagon--half--width) var(--hexagon--half--height),
            var(--hexagon--half--width) var(--hexagon--half--height),
            var(--hexagon--half--width) var(--hexagon--half--height),
            var(--hexagon--half--width) var(--hexagon--half--height),
            var(--hexagon--half--width) var(--hexagon--half--height),
            var(--hexagon--half--width) var(--hexagon--half--height)
        );
    }
    100% {
        clip-path               : polygon(
            var(--chart--width--a) var(--chart--height--a),
            var(--chart--width--b) var(--chart--height--b),
            var(--chart--width--c) var(--chart--height--c),
            var(--chart--width--d) var(--chart--height--d),
            var(--chart--width--e) var(--chart--height--e),
            var(--chart--width--f) var(--chart--height--f)
        );
    }
}
.hexagon-radar-chart span {
    width                       : max-content;
    margin                      : auto;
    font-size                   : .8rem;
    color                       : var(--black_1);
    position                    : absolute;
}
.hexagon-radar-chart span:nth-of-type(1),
.hexagon-radar-chart span:nth-of-type(4) {
    left                        : 0;
    right                       : 0;
}
.hexagon-radar-chart span:nth-of-type(1) {
    top                         : -30px;
}
.hexagon-radar-chart span:nth-of-type(4) {
    bottom                      : -30px;
}
.hexagon-radar-chart span:nth-of-type(2),
.hexagon-radar-chart span:nth-of-type(3) {
    right                       : -20px;
    transform                   : translate(50%, 0);
}
.hexagon-radar-chart span:nth-of-type(5),
.hexagon-radar-chart span:nth-of-type(6) {
    left                        : -20px;
    transform                   : translate(-50%, 0);
}
.hexagon-radar-chart span:nth-of-type(2),
.hexagon-radar-chart span:nth-of-type(6) {
    top                         : 30px;
}
.hexagon-radar-chart span:nth-of-type(3),
.hexagon-radar-chart span:nth-of-type(5) {
    bottom                      : 30px;
}
.star-gradient-chart {
    color                       : transparent;
    background-image            : var(--star--gradient);
    background-size             : 200%;
    background-clip             : text;
    -webkit-background-clip     : text;
    font-style                  : normal;
    line-height                 : 1;
    display                     : inline-block;
    animation                   : rollStar 3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes rollStar {
    0% {
        transform               : rotateX(720deg);
    }
    100% {
        transform               : rotateX(-720deg);
    }
}
.star-gradient-chart.-a {background-position: calc(var(--review--a) * 1em);}
.star-gradient-chart.-b {background-position: calc(var(--review--b) * 1em);}
.star-gradient-chart.-c {background-position: calc(var(--review--c) * 1em);}
.star-gradient-chart.-d {background-position: calc(var(--review--d) * 1em);}
.star-gradient-chart.-e {background-position: calc(var(--review--e) * 1em);}
.star-gradient-chart.-f {background-position: calc(var(--review--f) * 1em);}
.bar-gradient-chart {
    width                       : 100%;
    height                      : 10px;
    border-radius               : 5px;
    background-image            : var(--star--gradient);
    background-size             : 200%;
    display                     : block;
    animation                   : slideBar 3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes slideBar {
    0% {
        transform               : translateX(-100%);
    }
    100% {
        transform               : translateX(0%);
    }
}
.bar-gradient-chart.-a-5 {background-position: calc(var(--review--a--5) * -1%);}
.bar-gradient-chart.-a-4 {background-position: calc(var(--review--a--4) * -1%);}
.bar-gradient-chart.-a-3 {background-position: calc(var(--review--a--3) * -1%);}
.bar-gradient-chart.-a-2 {background-position: calc(var(--review--a--2) * -1%);}
.bar-gradient-chart.-a-1 {background-position: calc(var(--review--a--1) * -1%);}
.bar-gradient-chart.-b-5 {background-position: calc(var(--review--b--5) * -1%);}
.bar-gradient-chart.-b-4 {background-position: calc(var(--review--b--4) * -1%);}
.bar-gradient-chart.-b-3 {background-position: calc(var(--review--b--3) * -1%);}
.bar-gradient-chart.-b-2 {background-position: calc(var(--review--b--2) * -1%);}
.bar-gradient-chart.-b-1 {background-position: calc(var(--review--b--1) * -1%);}
.bar-gradient-chart.-c-5 {background-position: calc(var(--review--c--5) * -1%);}
.bar-gradient-chart.-c-4 {background-position: calc(var(--review--c--4) * -1%);}
.bar-gradient-chart.-c-3 {background-position: calc(var(--review--c--3) * -1%);}
.bar-gradient-chart.-c-2 {background-position: calc(var(--review--c--2) * -1%);}
.bar-gradient-chart.-c-1 {background-position: calc(var(--review--c--1) * -1%);}
.bar-gradient-chart.-d-5 {background-position: calc(var(--review--d--5) * -1%);}
.bar-gradient-chart.-d-4 {background-position: calc(var(--review--d--4) * -1%);}
.bar-gradient-chart.-d-3 {background-position: calc(var(--review--d--3) * -1%);}
.bar-gradient-chart.-d-2 {background-position: calc(var(--review--d--2) * -1%);}
.bar-gradient-chart.-d-1 {background-position: calc(var(--review--d--1) * -1%);}
.bar-gradient-chart.-e-5 {background-position: calc(var(--review--e--5) * -1%);}
.bar-gradient-chart.-e-4 {background-position: calc(var(--review--e--4) * -1%);}
.bar-gradient-chart.-e-3 {background-position: calc(var(--review--e--3) * -1%);}
.bar-gradient-chart.-e-2 {background-position: calc(var(--review--e--2) * -1%);}
.bar-gradient-chart.-e-1 {background-position: calc(var(--review--e--1) * -1%);}
.bar-gradient-chart.-f-5 {background-position: calc(var(--review--f--5) * -1%);}
.bar-gradient-chart.-f-4 {background-position: calc(var(--review--f--4) * -1%);}
.bar-gradient-chart.-f-3 {background-position: calc(var(--review--f--3) * -1%);}
.bar-gradient-chart.-f-2 {background-position: calc(var(--review--f--2) * -1%);}
.bar-gradient-chart.-f-1 {background-position: calc(var(--review--f--1) * -1%);}

@media screen and (min-width: 897px) {

    .girls-reviews {
        grid-template-columns   : 1fr 1fr;
    }
    .girls-reviews .graph {
        margin-top              : 0;
    }
}