.title{font-family:Montserrat,sans-serif;font-size:20px;font-weight:700;line-height:24.38px;color:#000}.title--sm{font-size:16px;line-height:22px}.title--lg{font-size:24px;line-height:29px}.title--xxl{font-size:48px;line-height:59px}.title--center{text-align:center}.title--left{text-align:left}.title--right{text-align:right}.character-card{width:130px;height:182px;position:relative;transition:.3s transform ease-in;transform-style:preserve-3d}@media screen and (min-width: 768px){.character-card{width:212px;height:260px}}.character-card--flipped,.character-card--matched{transform:rotateY(180deg);opacity:1}.character-card__face{padding:8px 8px 12px;border-radius:8px;box-shadow:0 4px 6px -2px #0003;width:100%;height:100%;backface-visibility:hidden;position:absolute}@media screen and (min-width: 768px){.character-card__face{padding:16px 16px 22px}}.character-card__face--front{background-color:#fff;transform:rotateY(180deg);transition:opacity .8s ease-out;transition-delay:1s;opacity:1}.character-card__face--front .character-thumb{border-radius:8px;margin-bottom:8px;object-fit:cover}.character-card__face--front .character-details__name{color:#233a59;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media screen and (max-width: 768px){.character-card__face--front .character-details__name{font-size:12px;line-height:18px}}.character-card__face--front .character-details__status{font-size:10px;line-height:12.19px;color:#000}.character-card__face--back{background-color:#a2f2f9;display:grid;place-content:center;cursor:pointer}.character-card--matched{pointer-events:none}.character-card--matched .character-card__face--front{opacity:0}.characters-list{display:grid;grid-template-columns:repeat(auto-fill,130px);gap:16px}@media screen and (min-width: 768px){.characters-list{grid-template-columns:repeat(auto-fill,212px)}}.loader{display:flex;justify-content:center;width:100%}.loader__image{object-fit:contain}.button{padding:12px 80px;border-radius:8px;background-color:#a2f2f9;color:#233a59;border-width:0 0 4px 4px;border-color:#d8e054;border-style:solid;cursor:pointer;font-weight:600;font-size:24px;letter-spacing:.1em;text-align:center;font-family:Montserrat,sans-serif;box-shadow:-1px 1px 4px #0003}.button--green-200,.button--green-300{border-color:#e6ec59}.button--green-200{background-color:#49d5e1}.button--green-300{background-color:#1a7a83}.button--green-300,.button--yellow-500{color:#fff}.button--yellow-300,.button--yellow-400,.button--yellow-500{border-color:#a2f2f9}.button--yellow-300{background-color:#d8e054}.button--yellow-400{background-color:#b1b83b}.button--yellow-500{background-color:#73781c}.home__title{margin-bottom:24px}.home__content .home-actions{margin-top:48px;display:flex;justify-content:center;position:sticky;bottom:16px}.board__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}@media screen and (max-width: 768px){.board__header .title{font-size:16px;line-height:22px}}.results{max-width:560px;margin:0 auto}.results .title{color:#233a59;margin-bottom:16px}@media screen and (max-width: 768px){.results .title{font-size:32px;line-height:38px}}.results__details{font-family:Montserrat;font-size:16px;font-weight:500;line-height:22px;color:#000;margin-bottom:32px}@media screen and (min-width: 768px){.results__details{font-size:24px;line-height:29px;margin-bottom:72px}}.results__actions{display:grid;grid-template-columns:1fr;row-gap:16px}@media screen and (min-width: 768px){.results__actions{grid-template-columns:repeat(2,1fr);column-gap:54px}}.header{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.header__title{background-color:#d8e054;border-radius:25px;padding:8px 16px;font-weight:700;font-size:20px;line-height:24.38px;color:#000}.app{background-color:#1c1d3b;min-height:100vh;width:100%;padding:24px 24px 0;font-family:Montserrat,sans-serif;display:grid;grid-template-rows:auto 1fr;row-gap:32px}@media screen and (min-width: 768px){.app{padding:24px 40px 0}}.app__content{border-radius:16px 16px 0 0;background-color:#fffac2;padding:22px 16px 20px;width:100%;margin:0 auto;max-width:308px}@media screen and (min-width: 768px){.app__content{max-width:1040px;padding:36px 72px 23px}}
