@font-face {
    font-family: 'DTGetaiGroteskDisplay';
    font-style: normal;
    font-weight: 300;
    src: local(''), url('../fonts/DTGetaiGroteskDisplay-Black.otf') format('opentype');
}
@font-face {
    font-family: 'MajulahUNLICENSED-Medium';
    font-style: normal;
    font-weight: 300;
    src: local(''), url('../fonts/MajulahUNLICENSED-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'DTRobusta-Black';
    font-style: normal;
    font-weight: 300;
    src: local(''), url('../fonts/DTRobusta-Black.otf') format('opentype');
}
@font-face {
    font-family: 'Graye-Sans';
    font-style: normal;
    font-weight: 300;
    src: local(''), url('../fonts/Graye-Sans.otf') format('opentype');
}
@font-face {
    font-family: 'LabyrinthVF';
    font-style: normal;
    font-weight: 300;
    src: local(''), url('../fonts/LabyrinthVF.ttf') format('truetype');
}
@font-face {
    font-family: 'DTStraitsSans';
    font-style: normal;
    font-weight: 400;
    src: local(''), url('../fonts/DTStraitsSans-Semibold.otf') format('opentype');
}
@font-face {
    font-family: 'VisuelleUNLICENSED-Regular';
    font-style: normal;
    font-weight: 400;
    src: local(''), url('../fonts/VisuelleUNLICENSED-Semibold.otf') format('opentype');
}

@media (max-width: 767px) {
    .key-quote-box-new .h1 {
        width: 90%;
    }
    .primary-type {
        font-size: 0.75em;
    }
    .section-heading {
        text-align: center;
    }
}


/* Collaborator */

.result-collaborator .font-alt-q {
    letter-spacing: 0.0em;
}
.result-collaborator .key-quote-box-new .h1 {
    line-height: 98%;  
}
.result-collaborator .key-quote-box-new {
    aspect-ratio: 5/3.5;
}
@media (max-width: 1699px) {
    .result-collaborator .key-quote-large {
        font-size: 1.1em;
    }
    .result-collaborator .key-quote-box-new {
        aspect-ratio: 5/4.5;
    }
}
@media (max-width: 539px) {
    .result-collaborator .key-quote-box-new {
        aspect-ratio: 5/5;
    }
}

/* Champion */

.result-champion .font-alt-q {
    font-family: "DTGetaiGroteskDisplay";
    line-height: 110%;
}
.result-champion .key-quote-box-new {
    text-transform: uppercase;
    aspect-ratio: 5/3.8;
}
.result-champion .key-quote-large {
    font-size: 0.75em;
}
.result-champion .font-modifier {
    font-size: 0.95em;
}
@media (max-width: 1699px) {
    .result-champion .key-quote-large {
        font-size: 0.7em;
    }
    .result-champion .key-quote-box-new {
        aspect-ratio: 5/4.5;
    }
}
@media (max-width: 539px) {
    .result-champion .key-quote-box-new {
        aspect-ratio: 5/5;
    }
}

/* Craftsperson */

.result-craftsperson .font-alt-q {
    font-family: "MajulahUNLICENSED-Medium";
    letter-spacing: 0.02em;
    line-height: 100%;
}
.result-craftsperson #primary-type-name {
    padding-bottom: .5rem;
}
.result-craftsperson .key-quote-box-new {
    text-transform: uppercase;
    aspect-ratio: 5/3.5;
}
.result-craftsperson .font-modifier {
    font-size: 0.95em;
}
@media (max-width: 1699px) {
    .result-craftsperson .key-quote-box-new {
        aspect-ratio: 5/5;
    }
}
@media (max-width: 539px) {
    .result-craftsperson .key-quote-box-new {
        aspect-ratio: 5/4.75;
    }
    .result-craftsperson .key-quote-box-new  {
        font-size: 0.9em;  
    }
}

/* Maverick */

.result-maverick .font-alt-q {
    font-family: "DTRobusta-Black";
    line-height: 90%;
}
.result-maverick #primary-type-name {
    padding-bottom: .5rem;
}
.result-maverick .key-quote-box-new {
    aspect-ratio: 5/3.5;
}
.result-maverick .font-modifier {
    font-size: 1.1em;
}
@media (max-width: 1699px) {
    .result-maverick .key-quote-box-new {
        aspect-ratio: 5/4.5;
    }
}
@media (max-width: 539px) {
    .result-maverick .key-quote-box-new {
        aspect-ratio: 5/5;
    }
}

/* Strategist */

.result-strategist .font-alt-q {
    font-family: "Graye-Sans";
    letter-spacing: -0.04em;
    line-height: 105%;
    margin-top: -0.6rem;
}
.result-strategist #primary-type-name {
    padding-bottom: .3rem;
}
.result-strategist .key-quote-box-new {
    aspect-ratio: 5/3.3;
}
.result-strategist .key-quote-large {
    font-size: 1.2em;  
}
@media (max-width: 1699px) {
    .result-strategist .key-quote-box-new {
        aspect-ratio: 5/4.5;
    }
}
@media (max-width: 539px) {

    .result-strategist .key-quote-box-new {
        aspect-ratio: 5/4.5;
    }
}

/* Explorer */

.result-explorer .font-alt-q {
    font-family: "LabyrinthVF";
    letter-spacing: 0.03em;
    line-height: 115%;
}

.result-explorer .key-quote-box-new {
    text-transform: uppercase;
    aspect-ratio: 5/3.5;
}
.result-explorer .font-modifier {
    font-size: 0.85em;
}
.result-explorer .key-quote-large {
    font-size: 0.8em;
}
@media (max-width: 1699px) {
    .result-explorer .key-quote-box-new {
        aspect-ratio: 5/4.5;
    }
}
@media (max-width: 539px) {
    .result-explorer .key-quote-box-new {
        aspect-ratio: 5/5;
    }
    .result-explorer .key-quote-large {
        font-size: 0.7em;  
    }
}

/* Guardian */

.result-guardian .font-alt-q {
    font-family: "DTStraitsSans";
    letter-spacing: -0.04em;
    line-height: 100%;
}

.result-guardian .key-quote-box-new {
    aspect-ratio: 5/3.5;
}
.result-guardian .key-quote-box-new .h1 {
    line-height: 100%;
}
.result-guardian .key-quote-large {
    font-size: 1em;
}
@media (max-width: 1699px) {
    .result-guardian .key-quote-box-new {
        aspect-ratio: 5/4.5;
    }
}
@media (max-width: 539px) {
    .result-guardian .key-quote-box-new {
        aspect-ratio: 5/5;
    }
}

/* Pragmatist */

.result-pragmatist .font-alt-q {
    font-family: "VisuelleUNLICENSED-Regular";
    letter-spacing: -0.02em;
    line-height: 100%;
}
.result-pragmatist #primary-type-name {
    padding-bottom: .5rem;
}
.result-pragmatist .key-quote-box-new {
    aspect-ratio: 5/3.5;  
}
.result-pragmatist .key-quote-box-new .h1 {
    line-height: 90%;
    
}
.result-pragmatist .font-modifier {
    font-size: 0.95em;
}
.result-pragmatist .key-quote-large {
    font-size: 1.1em;
    line-height: 50%;
}
@media (max-width: 1699px) {
    .result-pragmatist .key-quote-box-new {
        aspect-ratio: 5/4;
    }
}
@media (max-width: 539px) {
    .result-pragmatist .key-quote-box-new {
        aspect-ratio: 5/4.5;
    }
}




.key-quote-large .font-alt-q {
    width: 100%;
    border: 0px solid red;
}

.result-champion .key-quote-large .font-alt-q {
   
}

@media (max-width: 1199px) {
    .key-quote-large .font-alt-q {
        width: 120%;
    }
   
}
@media (max-width: 991px) {
    .key-quote-large .font-alt-q {
        width: 125%;
    }
}
@media (max-width: 767px) {
    .key-quote-large .font-alt-q {
        width: 100%;
    }
}