.hof-award {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    position: relative;

    overflow: hidden;

    padding: 18px;

    color: #d8d0b7;

    background-image:
        linear-gradient(
            rgba(2, 15, 10, .35),
            rgba(2, 15, 10, .35)
        ),
        url("https://upforme.ru/uploads/0017/96/47/2/603339.png");

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    border: 1px solid #708253;

    box-shadow:
        inset 0 0 0 4px rgba(3, 15, 10, .95),
        inset 0 0 0 5px rgba(112,130,83,.34),
        0 4px 14px rgba(0,0,0,.40);

    font-family: Georgia, "Times New Roman", serif;
}


.hof-award-head {
    display: grid;

    grid-template-columns:
        180px
        minmax(0, 1fr)
        120px;

    align-items: center;

    min-height: 120px;

    padding:
        8px
        22px
        16px;

    box-sizing: border-box;

    border-bottom:
        1px solid rgba(112,130,83,.60);
}



.hof-award-kicker {
    align-self: center;

    color: #9daa79;

    font-size: 9px;

    line-height: 1.6;

    letter-spacing: 1.8px;

    text-align: left;

    text-transform: uppercase;
}




.hof-award-title {
    min-width: 0;

    text-align: center;
}


.hof-award-title > div {
    color: #d6b875;

    font-size: 34px;

    line-height: 1;

    letter-spacing: 4px;

    white-space: nowrap;
}


.hof-award-title span {
    display: block;

    margin-top: 8px;

    color: #abb28a;

    font-size: 11px;

    line-height: 1;

    letter-spacing: 7px;

    text-transform: uppercase;
}



.hof-award-emblem {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    width: 100%;
}


.hof-award-emblem img {
    display: block;

    width: 82px;

    height: 82px;

    object-fit: contain;
}


.hof-award-person {
    display: grid;

    grid-template-columns:
        140px
        160px
        minmax(0, 1fr);

    height: 140px;

    min-height: 140px;

    overflow: hidden;

    border-bottom:
        1px solid rgba(112,130,83,.65);
}



.hof-award-photo {
    width: 140px;

    height: 140px;

    overflow: hidden;

    border-right:
        1px solid rgba(112,130,83,.55);
}


.hof-award-photo img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
}



.hof-award-info {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    box-sizing: border-box;

    padding:
        10px
        12px;

    text-align: center;

    border-right:
        1px solid rgba(112,130,83,.45);
}


.hof-award-icon {
    width: 35px;

    height: 35px;

    margin-bottom: 8px;
}


.hof-award-icon img {
    display: block;

    width: 35px;

    height: 35px;

    object-fit: contain;
}


.hof-award-name {
    width: 100%;

    color: #d5b66f;

    font-size: 13px;

    line-height: 1.2;

    text-align: center;

    text-transform: uppercase;

    white-space: normal;

    overflow: visible;

    text-overflow: clip;

    overflow-wrap: normal;

    word-break: normal;
}


.hof-award-result {
    margin-top: 6px;

    color: #b7bd91;

    font-size: 10px;

    line-height: 1;

    letter-spacing: 2px;
}


.hof-award-quote {
    position: relative;

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    min-width: 0;

    min-height: 0;

    height: 140px;

    padding:
        13px
        24px
        13px;

    overflow: hidden;
}


.hof-award-quote:before {
    position: absolute;

    left: -5px;

    top: 50%;

    transform:
        translateY(-50%);

    color: #bda264;

    font-size: 9px;
}



.hof-award-source {
    flex-shrink: 0;

    margin-top: 0;

    margin-bottom: 8px;

    color: #8e986f;

    font-size: 8px;

    line-height: 1;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.hof-award-source a {
    color: #8e986f !important;

    text-decoration: none !important;

    transition: .2s;
}


.hof-award-source a:hover {
    color: #d5b66f !important;

    text-decoration: none !important;
}



.hof-award-quote-text {
    flex: 1;

    min-width: 0;

    min-height: 0;

    padding-right: 10px;

    color: #ddd6c2;

    font-size: 13px;

    line-height: 1.55;

    font-style: italic;

    text-align: left;

    overflow-y: auto;

    overflow-x: hidden;
}




.hof-award-quote-text::-webkit-scrollbar {
    width: 4px;
}


.hof-award-quote-text::-webkit-scrollbar-track {
    background:
        rgba(112,130,83,.08);
}


.hof-award-quote-text::-webkit-scrollbar-thumb {
    background:
        #708253;

    border-radius: 10px;
}


.hof-award-quote-text::-webkit-scrollbar-thumb:hover {
    background:
        #9a8657;
}




.hof-award-footer {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding:
        16px
        8px
        2px;

    color: #a9915e;

    font-size: 9px;

    line-height: 1;

    letter-spacing: 3px;

    text-align: center;
}


.hof-award-footer span {
    flex: 1;

    max-width: 100px;

    height: 1px;

    background: #708253;
}



@media screen and (max-width: 850px) {

    .hof-award-person {
        grid-template-columns:
            120px
            145px
            minmax(0, 1fr);
    }


    .hof-award-photo {
        width: 120px;

        height: 140px;
    }


    .hof-award-title > div {
        font-size: 25px;
    }


    .hof-award-quote {
        padding-left: 18px;

        padding-right: 16px;
    }

}





.hof2 {
    position: relative;

    width: 100%;
    max-width: 100%;

    height: 650px;

    box-sizing: border-box;

    overflow: hidden;

    color: #d8d0b7;

    background: #03110b;

    border: 1px solid #708253;

    font-family: Georgia, "Times New Roman", serif;
}




.hof2-architecture {
    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("https://upforme.ru/uploads/0017/96/47/2/920208.png");

    background-repeat: no-repeat;

    background-position:
        center center;

    background-size:
        cover;

    pointer-events: none;
}




.hof2-inner {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding:
        18px
        28px
        18px;

    background:
        linear-gradient(
            rgba(2, 15, 10, .18),
            rgba(2, 15, 10, .18)
        );
}



.hof2-head {
    display: grid;

    grid-template-columns:
        115px
        minmax(0, 1fr)
        80px;

    align-items: center;

    height: 120px;

    box-sizing: border-box;

    padding:
        8px
        115px
        16px;

    border-bottom:
        1px solid rgba(112,130,83,.60);
}




.hof2-kicker {
    min-width: 0;

    justify-self: end;

    color: #9daa79;

    font-size: 9px;

    line-height: 1.6;

    letter-spacing: 1.8px;

    text-align: left;

    text-transform: uppercase;

    transform:
        translateX(-35px);
}




.hof2-title {
    min-width: 0;

    text-align: center;
}


.hof2-title > div {
    color: #d6b875;

    font-size: 34px;

    line-height: 1;

    letter-spacing: 3px;

    text-align: center;

    white-space: nowrap;
}


.hof2-title span {
    display: block;

    margin-top: 7px;

    color: #abb28a;

    font-size: 11px;

    line-height: 1;

    letter-spacing: 6px;

    text-align: center;

    text-transform: uppercase;

    white-space: nowrap;
}



.hof2-emblem {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    box-sizing: border-box;

    transform:
        translateX(25px);
}


.hof2-emblem img {
    display: block;

    width: 90px;
    height: 90px;

    object-fit: contain;
}




.hof2-grid {
    width: 100%;

    height: 390px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;

    box-sizing: border-box;

    margin-top: 6px;
}




.hof2-person {
    position: relative;

    min-width: 0;

    height: 390px;

    overflow: hidden;

    box-sizing: border-box;

    border:
        1px solid rgba(112,130,83,.72);

    box-shadow:
        inset 0 0 0 3px rgba(3,15,10,.65);

    background:
        rgba(2,14,9,.56);
}




.hof2-card-bg {
    position: absolute;

    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            rgba(2,15,10,.35),
            rgba(2,15,10,.35)
        );

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-size:
        cover;

    pointer-events:
        none;
}




.hof2-top,
.hof2-quote {
    position: relative;

    z-index: 1;
}




.hof2-top {
    display: grid;

    grid-template-columns:
        190px
        minmax(0, 1fr);

    height: 190px;

    box-sizing: border-box;

    border-bottom:
        1px solid rgba(112,130,83,.48);
}




.hof2-photo {
    width: 190px;
    height: 190px;

    overflow: hidden;

    border-right:
        1px solid rgba(112,130,83,.48);
}


.hof2-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center center;

    filter:
        grayscale(72%)
        sepia(16%)
        contrast(1.05)
        brightness(.82);
}




.hof2-info {
    min-width: 0;

    height: 190px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding:
        16px
        12px;

    text-align: center;
}




.hof2-icon {
    width: 50px;
    height: 50px;

    margin-bottom: 12px;
}


.hof2-icon img {
    display: block;

    width: 50px;
    height: 50px;

    object-fit: contain;
}


/* имя */

.hof2-name {
    width: 100%;

    color: #d5b66f;

    font-size: 15px;

    line-height: 1.2;

    text-align: center;

    text-transform: uppercase;

    white-space: normal;

    overflow: visible;

    overflow-wrap: normal;

    word-break: normal;
}




.hof2-result {
    margin-top: 9px;

    color: #b7bd91;

    font-size: 10px;

    line-height: 1.2;

    letter-spacing: 2px;

    text-align: center;

    text-transform: uppercase;
}



.hof2-quote {
    height: 200px;

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    padding:
        16px
        28px
        16px;

    overflow: hidden;
}



.hof2-source {
    flex-shrink: 0;

    margin-bottom: 10px;

    color: #8e986f;

    font-size: 8px;

    line-height: 1;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.hof2-source a {
    color: #8e986f !important;

    text-decoration: none !important;

    transition: .2s;
}


.hof2-source a:hover {
    color: #d5b66f !important;

    text-decoration: none !important;
}




.hof2-quote-text {
    flex: 1;

    min-height: 0;

    padding-right: 10px;

    color: #ddd6c2;

    font-size: 11px;

    line-height: 1.55;

    font-style: italic;

    text-align: left;

    overflow-y: auto;

    overflow-x: hidden;
}




.hof2-quote-text::-webkit-scrollbar {
    width: 4px;
}


.hof2-quote-text::-webkit-scrollbar-track {
    background:
        rgba(112,130,83,.08);
}


.hof2-quote-text::-webkit-scrollbar-thumb {
    background:
        #708253;

    border-radius:
        10px;
}


.hof2-quote-text::-webkit-scrollbar-thumb:hover {
    background:
        #9a8657;
}



.hof2-footer {
    width: 100%;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    box-sizing: border-box;

    padding:
        12px
        90px
        0;

    color: #a9915e;

    font-size: 9px;

    line-height: 1;

    letter-spacing: 3px;

    text-align: center;

    text-transform: uppercase;

    overflow: hidden;
}


.hof2-footer div {
    flex: 0 1 auto;

    white-space: nowrap;
}



.hof2-footer span {
    flex: 1;

    max-width: 120px;

    height: 1px;

    background:
        #708253;
}






.hofm {
    position: relative;

    width: 100%;
    max-width: 100%;

    height: 650px;

    box-sizing: border-box;

    overflow: hidden;

    color: #d8d0b7;

    border: 1px solid #708253;

    background: #03110b;

    font-family: Georgia, "Times New Roman", serif;
}



.hofm-bg {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image:
        linear-gradient(
            rgba(2,15,10,.18),
            rgba(2,15,10,.18)
        ),
        url("https://upforme.ru/uploads/0017/96/47/2/946916.png");

    background-repeat: no-repeat;

    background-position: center top;
    background-size: 100% 100%;

    pointer-events: none;
}




.hofm-inner {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 100%;

    display: grid;

    grid-template-rows:
        90px
        minmax(0,1fr)
        45px;

    box-sizing: border-box;

    padding:
        18px
        30px
        12px;

    overflow: hidden;
}



.hofm-head {
    display: grid;

    grid-template-columns:
        150px
        minmax(0,1fr)
        150px;

    align-items: center;

    height: 90px;

    box-sizing: border-box;

    padding:
        0
        25px
        10px;
}



.hofm-side-text {
    color: #9daa79;

    font-size: 8px;

    line-height: 1.6;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


.hofm-side-left {
    text-align: left;
}


.hofm-side-right {
    text-align: right;
}



.hofm-title {
    min-width: 0;

    text-align: center;
}


.hofm-title > div {
    color: #d6b875;

    font-size: 34px;

    line-height: 1;

    letter-spacing: 4px;

    text-transform: uppercase;

    white-space: nowrap;
}


.hofm-title span {
    display: block;

    margin-top: 8px;

    color: #abb28a;

    font-size: 9px;

    line-height: 1;

    letter-spacing: 5px;

    text-transform: uppercase;
}




.hofm-grid {
    width: 100%;

    min-height: 0;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 20px;

    box-sizing: border-box;

    align-items: stretch;

    overflow: hidden;
}




.hofm-person {
    position: relative;

    min-width: 0;
    min-height: 0;

    height: 100%;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    overflow: hidden;

    padding:
        14px
        18px
        14px;

    text-align: center;

    border:
        1px solid rgba(112,130,83,.72);

    background:
        rgba(2,14,9,.72);

    box-shadow:
        inset 0 0 0 3px rgba(3,15,10,.62);
}

/* =========================================================
   ФОН ВНУТРИ КАРТОЧКИ
   ========================================================= */

.hofm-banner-bg {
    position: absolute;

    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,31,20,.85),
            rgba(2,13,9,.94)
        );

    pointer-events: none;
}



.hofm-photo-wrap,
.hofm-name,
.hofm-rank,
.hofm-divider,
.hofm-source,
.hofm-quote {
    position: relative;

    z-index: 1;
}




.hofm-photo-wrap {
    width: 165px;

    margin:
        0
        auto
        10px;

    position: relative;
}


.hofm-photo {
    width: 165px;
    height: 185px;

    overflow: hidden;

    border:
        1px solid #a88c53;

    box-shadow:
        inset 0 0 0 3px rgba(3,15,10,.75);
}


.hofm-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;
}



.hofm-crown {
    position: absolute;

    z-index: 3;

    top: -18px;
    left: 50%;

    transform:
        translateX(-50%);

    color: #d3b16a;

    font-size: 28px;

    line-height: 1;
}


.hofm-main-crown {
    top: -26px;

    font-size: 40px;
}



.hofm-place {
    position: absolute;

    z-index: 4;

    left: 50%;
    bottom: -18px;

    transform:
        translateX(-50%);

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #e0c582;

    background: #07160f;

    border:
        2px solid #a88c53;

    font-size: 17px;

    line-height: 1;
}




.hofm-name {
    margin-top: 22px;

    color: #d7bb77;

    font-size: 15px;

    line-height: 1.15;

    letter-spacing: .6px;

    text-align: center;

    text-transform: uppercase;

    white-space: normal;
}




.hofm-rank {
    margin-top: 6px;

    color: #b7bd91;

    font-size: 9px;

    line-height: 1;

    letter-spacing: 2.2px;

    text-transform: uppercase;
}



.hofm-divider {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin:
        11px
        auto
        6px;

    color: #b99c5d;

    font-size: 7px;
}


.hofm-divider span {
    width: 38px;
    height: 1px;

    background:
        rgba(112,130,83,.80);
}




.hofm-source {
    margin:
        0
        8px
        7px;

    color: #8e986f;

    font-size: 7px;

    line-height: 1;

    letter-spacing: 1.5px;

    text-align: left;

    text-transform: uppercase;

    flex-shrink: 0;
}




.hofm-source a,
.hofm-source a:link,
.hofm-source a:visited {
    color: #8e986f !important;

    text-decoration: none !important;
}


.hofm-source a:hover {
    color: #c0ae73 !important;

    text-decoration: none !important;
}



.hofm-quote {
    position: relative;
    z-index: 1;

    min-height: 0;

    flex: 1;

    box-sizing: border-box;

    margin-top: 3px;

    padding:
        4px
        8px
        8px;

    overflow-y: auto;
    overflow-x: hidden;

    text-align: left;

    scrollbar-width: thin;

    scrollbar-color:
        rgba(112,130,83,.75)
        rgba(2,14,9,.30);
}



.hofm-quote::-webkit-scrollbar {
    width: 5px;
}


.hofm-quote::-webkit-scrollbar-track {
    background:
        rgba(2,14,9,.25);
}


.hofm-quote::-webkit-scrollbar-thumb {
    background:
        rgba(112,130,83,.70);

    border-radius: 5px;
}


.hofm-quote::-webkit-scrollbar-thumb:hover {
    background:
        rgba(154,170,114,.80);
}




.hofm-quote-text {
    color: #ddd6c2;

    font-size: 10px;

    line-height: 1.5;

    font-style: italic;

    text-align: left;

    padding-right: 6px;
}




.hofm-first {
    border-color: #9c8250;

    box-shadow:
        inset 0 0 0 3px rgba(3,15,10,.62),
        inset 0 0 20px rgba(184,145,72,.05);
}




.hofm-footer {
    width: 100%;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    box-sizing: border-box;

    padding:
        9px
        80px
        0;

    color: #a9915e;

    font-size: 8px;

    line-height: 1;

    letter-spacing: 2.8px;

    text-align: center;

    text-transform: uppercase;

    overflow: hidden;
}


.hofm-footer div {
    flex:
        0
        1
        auto;

    white-space: nowrap;
}


.hofm-footer span {
    flex: 1;

    max-width: 120px;

    height: 1px;

    background: #708253;
}




.legend-card {
    width: 1009px;
    height: 390px;

    display: flex;

    box-sizing: border-box;
    overflow: hidden;
    position: relative;

    background: #07150f;

    font-family: Georgia, "Times New Roman", serif;
    color: #d4c49a;
}



.legend-left {
    width: 410px;
    min-width: 410px;
    height: 100%;

    position: relative;
    overflow: hidden;
    box-sizing: border-box;

    border-right: 1px solid rgba(155,129,72,.45);
}


.legend-left-bg {
    position: absolute;
    inset: 0;
    z-index: 1;

    background-image:
        url("https://upforme.ru/uploads/0017/96/47/2/444444.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



.legend-photo-wrap {
    width: 255px;
    height: 282px;

    position: absolute;

    top: 41px;
    left: 77px;

    z-index: 2;

    overflow: hidden;
}


.legend-photo {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}



.legend-frame {
    width: 282px;
    height: 309px;

    position: absolute;

    top: 28px;
    left: 63px;

    z-index: 3;

    box-sizing: border-box;

    border: 11px solid #8f7a46;

    box-shadow:
        0 0 0 2px #4f452c,
        0 0 0 4px #a48f59,
        inset 0 0 12px rgba(0,0,0,.65),
        0 0 20px rgba(0,0,0,.45);

    pointer-events: none;
}


.legend-frame:before {
    content: "";

    position: absolute;
    inset: 1px;

    border: 1px solid rgba(196,180,132,.5);

    pointer-events: none;
}


.legend-frame:after {
    content: "";

    position: absolute;
    inset: -8px;

    border: 1px solid rgba(96,84,50,.8);
}



.legend-left-text {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 18px;

    z-index: 4;

    text-align: center;

    color: #d6ba70;

    font-size: 8px;
    line-height: 1;

    letter-spacing: 2px;

    text-transform: uppercase;

    white-space: nowrap;

    text-shadow:
        0 1px 3px #000,
        0 0 5px #000;
}



.legend-right {
    width: 599px;

    box-sizing: border-box;

    padding: 23px 28px 18px;

    position: relative;

    background-image:
        linear-gradient(
            rgba(2,15,10,.35),
            rgba(2,15,10,.35)
        ),
        url("https://upforme.ru/uploads/0017/96/47/2/831636.png");
}




.legend-brand {
    text-align: center;

    color: #a48e5c;

    font-size: 10px;

    letter-spacing: 7px;
}


.legend-title {
    margin-top: 5px;

    text-align: center;

    color: #d3b66d;

    font-size: 29px;
    line-height: 1;

    letter-spacing: 4px;

    text-transform: uppercase;
}



.legend-awards {
    margin-top: 20px;

    display: flex;

    justify-content: center;

    gap: 32px;
}


.legend-award {
    width: 112px;

    text-align: center;
}


.legend-award-icon {
    width: 78px;
    height: 78px;

    margin: 0 auto 8px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.legend-award-icon img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


.legend-award-title {
    color: #d0b574;

    font-size: 13px;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}



.legend-player {
    margin-top: 17px;
    margin-bottom: 5px;

    text-align: center;

    color: #e2c879;

    font-size: 16px;
    line-height: 1;

    letter-spacing: 3px;

    text-transform: uppercase;
}



.legend-quote {
    height: 132px;

    margin-top: 15px;

    position: relative;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    padding:
        12px
        30px
        12px
        35px;

    background:
        linear-gradient(
            90deg,
            rgba(13,34,23,.94),
            rgba(3,15,10,.94)
        );

    border:
        1px solid #917845;

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.42);

    overflow: hidden;
}




.legend-quote-source {
    flex-shrink: 0;

    margin-bottom: 7px;

    color: #8e986f;

    font-size: 8px;
    line-height: 1;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.legend-quote-source a {
    color: #8e986f !important;

    text-decoration: none !important;

    transition: .2s;
}


.legend-quote-source a:hover {
    color: #d4b568 !important;

    text-decoration: none !important;
}




.legend-quote-text {
    flex: 1;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 11px;

    color: #c9bd98;

    font-size: 11px;
    line-height: 1.55;

    text-align: left;
}


.legend-quote-text::-webkit-scrollbar {
    width: 5px;
}


.legend-quote-text::-webkit-scrollbar-track {
    background:
        rgba(151,128,71,.08);
}


.legend-quote-text::-webkit-scrollbar-thumb {
    background: #8e7948;

    border-radius: 10px;
}



.legend-quote-open,
.legend-quote-close {
    position: absolute;

    z-index: 2;

    color: #d4b568;

    font-size: 31px;

    line-height: 1;

    pointer-events: none;
}


.legend-quote-open {
    top: 4px;
    left: 10px;
}


.legend-quote-close {
    right: 9px;
    bottom: -5px;
}



.hofsolo-card {
    position: relative;

    width: 100%;
    max-width: 100%;

    height: 650px;

    box-sizing: border-box;

    overflow: hidden;

    color: #d8d0b7;

    background: #03110b;

    border: 1px solid #708253;

    box-shadow:
        inset 0 0 0 4px rgba(3,15,10,.92),
        inset 0 0 0 5px rgba(112,130,83,.30);

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}



.hofsolo-background {
    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        linear-gradient(
            rgba(2,15,10,.25),
            rgba(2,15,10,.38)
        ),
        url("https://upforme.ru/uploads/0017/96/47/2/991922.png");

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    pointer-events: none;
}



.hofsolo-inner {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding:
        18px
        28px
        16px;
}



.hofsolo-head {
    width: 100%;

    height: 105px;

    display: grid;

    grid-template-columns:
        150px
        minmax(0,1fr)
        110px;

    align-items: center;

    box-sizing: border-box;

    padding:
        5px
        55px
        13px;


    border-bottom: none;
}



.hofsolo-kicker {
    color: #9daa79;

    font-size: 9px;

    line-height: 1.55;

    letter-spacing: 1.8px;

    text-align: left;

    text-transform: uppercase;
}



.hofsolo-title {
    min-width: 0;

    text-align: center;
}


.hofsolo-title > div {
    color: #d6b875;

    font-size: 32px;

    line-height: 1;

    letter-spacing: 4px;

    white-space: nowrap;
}


.hofsolo-title > span {
    display: block;

    margin-top: 8px;

    color: #abb28a;

    font-size: 9px;

    line-height: 1;

    letter-spacing: 5px;

    text-transform: uppercase;
}



.hofsolo-emblem {
    display: flex;

    align-items: center;

    justify-content: flex-end;
}


.hofsolo-emblem img {
    display: block;

    width: 75px;
    height: 75px;

    object-fit: contain;
}



.hofsolo-main {
    width: 100%;

    height: 280px;

    display: grid;

    grid-template-columns:
        32%
        68%;

    box-sizing: border-box;

    border-bottom: none;
}




.hofsolo-photo-area {
    min-width: 0;

    height: 280px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    border-right: none;
}



.hofsolo-photo-frame {
    position: relative;

    width: 210px;
    height: 230px;

    box-sizing: border-box;

    padding: 0;

    transform:
        translateX(25px);

    background: none;

    border:
        1px solid rgba(112,130,83,.65);

    box-shadow:
        0 8px 20px rgba(0,0,0,.38);
}


.hofsolo-photo-frame:before,
.hofsolo-photo-frame:after {
    display: none;
}



.hofsolo-photo-inner {
    width: 100%;
    height: 100%;

    overflow: hidden;

    box-sizing: border-box;

    background: #07150f;
}


.hofsolo-photo-inner img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
        center center;

    filter:
        grayscale(72%)
        sepia(16%)
        contrast(1.05)
        brightness(.82);
}



.hofsolo-info {
    min-width: 0;

    height: 280px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    padding:
        20px
        35px
        18px;
}



.hofsolo-awards {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 20px;

    align-items: start;

    box-sizing: border-box;
}



.hofsolo-award {
    min-width: 0;

    text-align: center;
}



.hofsolo-award-icon {
    width: 66px;
    height: 66px;

    margin:
        0
        auto
        10px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.hofsolo-award-icon img {
    display: block;

    width: 66px;
    height: 66px;

    object-fit: contain;
}



.hofsolo-award-text {
    min-height: 24px;

    color: #aeb58c;

    font-size: 9px;

    line-height: 1.35;

    letter-spacing: 1.7px;

    text-align: center;

    text-transform: uppercase;
}



.hofsolo-name {
    width: 100%;

    margin-top: 25px;

    color: #d6b875;

    font-size: 22px;

    line-height: 1;

    letter-spacing: 4px;

    text-align: center;

    text-transform: uppercase;

    white-space: normal;
}



.hofsolo-name-decor {
    width: 70%;

    margin-top: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    color: #7f8967;

    font-size: 7px;

    line-height: 1;

    letter-spacing: 3px;

    text-align: center;
}


.hofsolo-name-decor span {
    flex: 1;

    height: 1px;

    background:
        rgba(112,130,83,.55);
}


.hofsolo-name-decor div {
    flex-shrink: 0;

    white-space: nowrap;
}



.hofsolo-quote {
    width: 100%;

    height: 185px;

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    padding:
        13px
        28px
        12px;

    overflow: hidden;
}



.hofsolo-source {
    flex-shrink: 0;

    margin-bottom: 9px;

    color: #8e986f;

    font-size: 8px;

    line-height: 1;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.hofsolo-source a {
    color: #8e986f !important;

    text-decoration: none !important;

    transition: .2s;
}


.hofsolo-source a:hover {
    color: #d5b66f !important;

    text-decoration: none !important;
}



.hofsolo-quote-box {
    position: relative;

    flex: 1;

    min-height: 0;

    box-sizing: border-box;

    padding:
        15px
        35px
        14px
        40px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(3,17,11,.88),
            rgba(8,29,19,.78),
            rgba(3,17,11,.88)
        );

    border:
        1px solid #917845;

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.42);
}



.hofsolo-quote-open,
.hofsolo-quote-close {
    position: absolute;

    z-index: 2;

    color: #d4b568;

    font-size: 31px;

    line-height: 1;

    font-style: normal;

    pointer-events: none;
}


.hofsolo-quote-open {
    top: 5px;

    left: 11px;
}


.hofsolo-quote-close {
    right: 10px;

    bottom: -4px;
}



.hofsolo-quote-text {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding-right: 12px;

    color: #c9bd98;

    font-size: 12px;

    line-height: 1.55;

    font-style: normal;

    text-align: left;

    overflow-y: auto;

    overflow-x: hidden;
}



.hofsolo-quote-text::-webkit-scrollbar {
    width: 5px;
}


.hofsolo-quote-text::-webkit-scrollbar-track {
    background:
        rgba(151,128,71,.08);
}


.hofsolo-quote-text::-webkit-scrollbar-thumb {
    background: #8e7948;

    border-radius: 10px;
}


.hofsolo-quote-text::-webkit-scrollbar-thumb:hover {
    background: #aa9259;
}



.hofsolo-footer {
    width: 100%;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    box-sizing: border-box;

    padding:
        12px
        90px
        0;

    color: #a9915e;

    font-size: 9px;

    line-height: 1;

    letter-spacing: 3px;

    text-align: center;

    text-transform: uppercase;

    overflow: hidden;
}


.hofsolo-footer div {
    flex:
        0
        1
        auto;

    white-space: nowrap;
}


.hofsolo-footer span {
    flex: 1;

    max-width: 120px;

    height: 1px;

    background:
        #708253;
}




.hof1 {
    position: relative;

    width: 100%;
    max-width: 100%;

    height: 650px;

    box-sizing: border-box;

    overflow: hidden;

    color: #d8d0b7;

    background: #03110b;

    border: 1px solid #708253;

    font-family: Georgia, "Times New Roman", serif;
}



.hof1-architecture {
    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("https://upforme.ru/uploads/0017/96/47/2/755155.png");

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    pointer-events: none;
}




.hof1-inner {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding:
        18px
        28px
        18px;

    background:
        linear-gradient(
            rgba(2,15,10,.14),
            rgba(2,15,10,.14)
        );
}



.hof1-head {
    display: grid;

    grid-template-columns:
        115px
        minmax(0,1fr)
        80px;

    align-items: center;

    width: 100%;

    height: 120px;

    box-sizing: border-box;

    padding:
        8px
        115px
        16px;

    border-bottom: none;

    transform: translateX(45px);
}



.hof1-kicker {
    min-width: 0;

    justify-self: end;

    color: #9daa79;

    font-size: 9px;

    line-height: 1.6;

    letter-spacing: 1.8px;

    text-align: left;

    text-transform: uppercase;

    transform: translateX(-20px);
}



.hof1-title {
    min-width: 0;

    text-align: center;
}


.hof1-title > div {
    color: #d6b875;

    font-size: 34px;

    line-height: 1;

    letter-spacing: 3px;

    text-align: center;

    white-space: nowrap;
}


.hof1-title span {
    display: block;

    margin-top: 7px;

    color: #abb28a;

    font-size: 11px;

    line-height: 1;

    letter-spacing: 6px;

    text-align: center;

    text-transform: uppercase;

    white-space: nowrap;
}



.hof1-emblem {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    box-sizing: border-box;

    transform: translateX(15px);
}


.hof1-emblem img {
    display: block;

    width: 90px;
    height: 90px;

    object-fit: contain;
}




.hof1-person {
    position: relative;

    width: calc(100% - 100px);

    height: 390px;

    margin:
        6px
        auto
        0;

    display: grid;

    grid-template-columns:
        240px
        minmax(0,1fr);

    box-sizing: border-box;

    overflow: hidden;

    border:
        1px solid rgba(112,130,83,.75);

    box-shadow:
        inset 0 0 0 3px rgba(3,15,10,.65);

    background:
        rgba(2,14,9,.60);

    transform: translateX(55px);
}



.hof1-card-bg {
    position: absolute;

    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            rgba(2,15,10,.38),
            rgba(2,15,10,.38)
        );

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    pointer-events: none;
}



.hof1-photo {
    position: relative;

    z-index: 1;

    width: 240px;
    height: 390px;

    overflow: hidden;

    border-right:
        1px solid rgba(112,130,83,.50);
}


.hof1-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    filter:
        grayscale(72%)
        sepia(16%)
        contrast(1.05)
        brightness(.82);
}



.hof1-content {
    position: relative;

    z-index: 1;

    min-width: 0;

    height: 390px;

    display: grid;

    grid-template-rows:
        125px
        minmax(0,1fr);

    overflow: hidden;
}




.hof1-info {
    min-width: 0;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    gap: 20px;

    box-sizing: border-box;

    padding:
        16px
        30px;

    text-align: left;

    border-bottom:
        1px solid rgba(112,130,83,.50);
}



.hof1-icon {
    width: 50px;
    height: 50px;

    flex:
        0
        0
        50px;

    margin: 0;
}


.hof1-icon img {
    display: block;

    width: 50px;
    height: 50px;

    object-fit: contain;
}



.hof1-info-text {
    min-width: 0;

    text-align: left;
}



.hof1-name {
    width: 100%;

    color: #d5b66f;

    font-size: 19px;

    line-height: 1.2;

    text-align: left;

    text-transform: uppercase;

    white-space: normal;

    overflow: visible;

    overflow-wrap: normal;

    word-break: normal;
}



.hof1-result {
    margin-top: 9px;

    color: #b7bd91;

    font-size: 11px;

    line-height: 1.2;

    letter-spacing: 2.5px;

    text-align: left;

    text-transform: uppercase;
}



.hof1-quote {
    min-width: 0;
    min-height: 0;

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    padding:
        15px
        15px
        15px;

    overflow: hidden;
}



.hof1-source {
    flex-shrink: 0;

    margin-top: 0;
    margin-bottom: 12px;

    color: #8e986f;

    font-size: 8px;

    line-height: 1;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.hof1-source a {
    color: #8e986f !important;

    text-decoration: none !important;

    transition: .2s;
}


.hof1-source a:hover {
    color: #d5b66f !important;

    text-decoration: none !important;
}



.hof1-quote-text {
    min-width: 0;
    min-height: 0;

    flex: 1;

    padding-right: 10px;

    color: #ddd6c2;

    font-size: 12px;

    line-height: 1.65;

    font-style: italic;

    text-align: left;

    overflow-y: auto;
    overflow-x: hidden;
}



.hof1-quote-text::-webkit-scrollbar {
    width: 4px;
}


.hof1-quote-text::-webkit-scrollbar-track {
    background:
        rgba(112,130,83,.08);
}


.hof1-quote-text::-webkit-scrollbar-thumb {
    background:
        #708253;

    border-radius:
        10px;
}


.hof1-quote-text::-webkit-scrollbar-thumb:hover {
    background:
        #9a8657;
}



.hof1-footer {
    width: 100%;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    box-sizing: border-box;

    padding:
        12px
        90px
        0;

    color: #a9915e;

    font-size: 9px;

    line-height: 1;

    letter-spacing: 3px;

    text-align: center;

    text-transform: uppercase;

    overflow: hidden;

    transform: translateX(40px);
}


.hof1-footer div {
    flex:
        0
        1
        auto;

    white-space: nowrap;
}


.hof1-footer span {
    flex: 1;

    max-width: 120px;

    height: 1px;

    background: #708253;
}







.legend-info {
    box-sizing: border-box;
    width: 850px;
    max-width: 100%;
    margin: 15px auto;
    padding: 18px 24px 14px;
    background: #0b1d13;
    border: 3px double #a58b52;
    color: #e4cc8c;
    text-align: center;
    font-family: Georgia, serif;
}

.legend-info-grid {
    display: flex;
    justify-content: space-around;
    gap: 12px;
}

.legend-info-grid > div {
    flex: 1;
    min-width: 0;
}

.legend-info-grid b,
.legend-info-grid small,
.legend-info-icon {
    display: block;
}

.legend-info-grid b {
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.legend-info-grid small {
    font-size: 11px;
    line-height: 16px;
}

.legend-info-bottom {
    border-top: 1px solid #8b794d;
    margin-top: 18px;
    padding-top: 12px;
    font-size: 11px;
    line-height: 17px;
    letter-spacing: 1px;
}