Editing Template:Main Page/styles.css

/* Layout START */
.mp-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
}

.mp-wrapper > .mp-section {
    width: 100%;
}

.mp-left,
.mp-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mp-inline-sections {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "site" "left" "right";
    gap: 6px;
    width: 100%;
}

.mp-left {
    grid-area: left;
}
.mp-right {
    grid-area: right;
}

@media screen and (min-width: 990px) {
    .mp-inline-sections {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas: "left site" "left right";
    }
}

/* Grow last tile in right column if left column is larger
.mp-right > :last-child {
    flex: 1;
} */

.mp-left-row {
    flex: 10 10 0;
}
/* Layout END */

/* Sections START */
.mp-section-center {
    text-align: center;
}

.mp-section {
    background-color: var(--background-color-1);
    padding: 12px;
    border-radius: 10px;
}

.mp-section-transparent {
    padding: 0;
    background-color: transparent;
}

.mp-section.mp-section-full {
    width: 100%;
}

.mp-wrapper h2 {
    font-size: 1.2em;
}

.mp-title {
    border: none;
    margin: 0;
    padding: 0;
}
/* Sections END */

/* Button START */
.mp-button-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 4px;
    width: 100%;
}

.mp-button {
    cursor: pointer;
    user-select: none;
    background-color: var(--background-color-2);
    border-radius: 10px;
}

.mp-button:hover {
    background: var(--background-color-3);
    /* outline: 2px solid var(--color-accent);
    outline-offset: -2px; */
}

.mp-button a {
    text-indent: -9999px; /* pushes the link text out of view */
    display: block;
    height: 100%;
    width: 100%;
}

.mp-icon {
    background: var(--color-base);
    mask: var(--icon-mask);
    /* -webkit-mask: var(--icon-mask); */
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.mp-icon-hoyoverse {
    --icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path fill='white' d='M38.995 15.048c-.89.06-1.77.098-2.654.231a25 25 0 0 0-8.652 2.971 25.35 25.35 0 0 0-7.641 6.706 24.7 24.7 0 0 0-4.105 8.259c-.792 2.83-1.12 5.87-.85 8.8.327 3.526 1.286 6.912 2.983 10.029 1.04 1.909 2.337 3.71 3.864 5.26 1.668 1.693 3.49 3.184 5.553 4.374 6.362 3.672 14.076 4.3 20.99 1.883 2.56-.894 5.441-2.174 6.762-4.684.64-1.219.742-2.563 1.034-3.884.29-1.31.777-2.59 1.386-3.785.706-1.385 1.46-2.707 1.984-4.179.126-.353.559-1.212.212-1.534-.282-.26-.561.126-.664.358-.334.752-.553 1.554-.893 2.307a20.24 20.24 0 0 1-7.216 8.52 20.26 20.26 0 0 1-8.75 3.237c-5.9.706-11.975-1.372-16.222-5.517-1.418-1.385-2.663-2.975-3.615-4.716-3.656-6.682-3.22-14.955 1.167-21.189a20.1 20.1 0 0 1 4.513-4.601 20.02 20.02 0 0 1 13.764-3.807c2.172.212 4.3.785 6.292 1.676 1.372.614 2.63 1.44 4.03 2 .988.394 2.007.68 3.048.895.705.146 1.423.216 2.114.425 1.071.323 1.983.98 2.741 1.79.232.247.638.94 1.06.768.236-.096.228-.371.154-.573-.168-.453-.511-.88-.784-1.276a24.8 24.8 0 0 0-4.105-4.611c-4.756-4.156-11.15-6.556-17.5-6.133m.148 6.244c-3.028.205-5.914 1-8.554 2.52a18.7 18.7 0 0 0-5.088 4.34 18.8 18.8 0 0 0-3.41 6.341c-2.148 6.955.05 14.833 5.55 19.623a19.1 19.1 0 0 0 6.488 3.711c2.112.705 4.456 1.077 6.685.935 2.967-.188 5.865-.943 8.455-2.432 2.043-1.175 3.862-2.693 5.34-4.532 4.713-5.868 5.499-14.304 1.806-20.894a19 19 0 0 0-4.393-5.29 18.8 18.8 0 0 0-6.096-3.395c-2.148-.715-4.517-1.081-6.783-.927m.245.783c2.128-.139 4.38.267 6.39.948a18 18 0 0 1 5.752 3.241 18 18 0 0 1 3.829 4.444c3.964 6.487 3.28 15.025-1.587 20.844a18.2 18.2 0 0 1-5.24 4.272 17.7 17.7 0 0 1-7.276 2.106c-2.383.15-4.765-.15-7.029-.922a18 18 0 0 1-5.555-3.076c-5.674-4.635-7.995-12.525-5.717-19.488a18 18 0 0 1 3.035-5.604 17.7 17.7 0 0 1 5.238-4.46c2.545-1.413 5.27-2.117 8.16-2.305m16.402 4.874c-.195.104-.203.331-.13.515.125.31.582.976.994.78.211-.1.213-.347.135-.537-.128-.31-.586-.979-1-.758m6.624 2.754c-.224.064-.265.317-.23.514.06.357.237.814.462 1.099.107.136.277.247.456.187.212-.07.236-.313.207-.503a2.6 2.6 0 0 0-.432-1.06c-.105-.145-.27-.292-.463-.237m-2.182 5.38c-.261-1.441-.836-2.863-1.466-4.179-.148-.307-.292-.692-.557-.919-.142-.122-.357-.18-.505-.033-.137.135-.113.343-.06.51.112.36.32.695.484 1.032.696 1.435 1.175 2.965 1.501 4.523.481 2.294.304 4.628.668 6.932.148.939.396 1.855.707 2.753.305.88.674 1.718.772 2.655.263 2.489-1.186 4.613-2.647 6.489-.505.649-1.17 1.227-1.613 1.917-.184.286-.145.764.31.647.43-.111.771-.627 1.048-.942a23.4 23.4 0 0 0 2.152-2.851c1.607-2.51 2.798-5.29 3.419-8.21.434-2.047.576-4.107.554-6.194a19 19 0 0 0-.18-2.262c-.058-.45-.101-.907-.286-1.327-.355-.808-1.167-1.362-2.04-1.443a2.4 2.4 0 0 0-.983.12c-.486.164-.863.496-1.278.782m2.458 13.47c-.208-.551-.242-1.157-.422-1.72-.478-1.497-1.038-2.903-1.255-4.474-.173-1.26-.123-2.523-.223-3.786-.09-1.15-.555-2.72.72-3.396.169-.089.352-.144.54-.168.195-.024.398-.022.59.014 1.446.267 1.448 2.112 1.526 3.256.242 3.538-.346 6.93-1.476 10.274'/></svg>");
}
.mp-icon-hoyolab {
    --icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path fill='white' d='M26.246 63.8787C25.0962 61.886 24.2777 59.1786 24.2777 55.5007C24.2777 54.5567 24.3765 52.6956 24.6195 50.4113C23.6038 48.3744 21.9014 46.7306 19.7747 45.8074L19.6866 45.7691C18.533 45.2683 18.3504 43.6953 19.3582 42.9394L21.1656 41.5835C22.6853 40.4435 23.6811 38.73 23.9248 36.8357L24.0341 35.9862C24.2779 34.0911 26.8448 33.7299 27.5936 35.4854L27.887 36.1732C28.9069 33.9276 30.189 32.2704 31.7883 31.8013C33.162 31.3984 34.0271 33.3483 34.8047 35.101L34.8054 35.1027C34.86 35.2258 34.9144 35.3484 34.9683 35.4687C36.5828 34.2829 39.1757 33.0984 42.8462 32.6204C45.4508 32.2812 47.353 32.3699 48.7071 32.6984C49.7807 30.6408 51.6576 27.9372 53.6388 26.9197C57.1696 25.1064 58.1016 28.3043 58.9734 31.2958C59.4118 32.8001 59.835 34.2523 60.5659 34.9888C61.9706 36.4043 64.6351 39.1383 66.169 40.8827C65.7845 26.7629 54.2176 15.4347 40.0049 15.4347C25.5495 15.4347 13.831 27.1532 13.831 41.6087C13.831 51.0167 18.7947 59.2653 26.246 63.8787ZM54.8959 30.7097C55.2296 30.4051 55.6628 29.9292 55.4602 29.4495C55.2284 28.9007 54.4015 28.8665 53.7471 29.3682C52.2759 30.4963 51.5551 32.3788 51.4131 33.8487C51.3599 34.3996 51.5247 34.7597 51.9434 34.8257C52.362 34.8917 52.6238 34.5614 52.7697 34.1753C53.5468 32.119 54.187 31.3569 54.8959 30.7097ZM35.5033 38.6456C34.797 39.6182 35.2733 40.5619 36.1007 40.7533C41.8509 38.8984 47.9864 38.1378 48.7616 38.0662C49.5137 37.9967 49.6075 36.9306 49.31 36.2142C49.0124 35.4979 47.3757 34.6314 42.9746 35.2756C38.5735 35.9198 36.2095 37.673 35.5033 38.6456ZM49.1325 60.2072C57.0223 58.0724 60.7369 53.9441 59.7317 50.2133C57.9311 43.5307 50.148 41.513 42.9663 43.6058C35.0091 45.9246 32.1224 51.9154 33.5147 56.9967C35.3069 63.5371 42.3858 62.0327 49.1325 60.2072ZM26.5706 38.1757C26.3823 37.7617 25.7787 37.8329 25.6903 38.2796L25.5842 38.8162C25.228 40.6165 24.1894 42.2056 22.6892 43.2453L21.8926 43.7974C21.5839 44.0114 21.6391 44.4866 21.9884 44.6228L22.4364 44.7976C24.3984 45.5629 25.9141 47.1789 26.5628 49.1972L27.1589 51.0517C27.316 51.5404 28.0255 51.4567 28.0664 50.9446L28.2361 48.8212C28.3968 46.8101 29.4045 44.965 31.0039 43.7531L31.3233 43.5111C31.6086 43.2949 31.5568 42.8487 31.2297 42.7048L30.4258 42.3512C28.8508 41.6584 27.5841 40.4046 26.8678 38.8293L26.5706 38.1757ZM25.1451 44.6342C25.8098 44.3438 26.268 43.7293 26.5255 43.3191C26.6655 43.0961 26.7733 42.8888 26.8464 42.7372C27.1086 42.1929 27.1159 41.5624 26.5 41.2979C25.8421 41.0154 25.5185 41.5823 25.2314 42.0854L25.2314 42.0854L25.2314 42.0854C25.1805 42.1747 25.1307 42.2619 25.0804 42.342C24.866 42.6835 24.6443 42.9109 24.4758 42.9845C24.0369 43.1763 23.8308 43.7011 24.0157 44.1567C24.2005 44.6122 24.7062 44.826 25.1451 44.6342ZM52.1476 47.6257C52.573 48.2529 52.5029 49.09 51.9083 49.5567L51.9047 49.5596L51.8873 49.5733C51.8713 49.5862 51.8464 49.6061 51.8142 49.6324C51.7495 49.685 51.6557 49.7626 51.5432 49.8589C51.316 50.0534 51.023 50.3154 50.7439 50.5967C50.6414 50.7 50.5464 50.8002 50.4606 50.8958C50.5852 50.9248 50.7199 50.9524 50.8625 50.9781C51.2509 51.0482 51.6398 51.0945 51.9364 51.1232C52.0833 51.1375 52.2043 51.1471 52.2871 51.1531C53.0614 51.209 53.7413 51.7692 53.6973 52.6082C53.6574 53.3673 53.0145 53.9501 52.2619 53.9099C52.0661 53.8989 51.8705 53.8824 51.6753 53.8635C51.3343 53.8304 50.867 53.7755 50.3817 53.6879C49.9098 53.6027 49.3577 53.4758 48.8757 53.28C48.6349 53.1821 48.3589 53.0463 48.1076 52.8528C47.8621 52.6637 47.5467 52.3468 47.3969 51.865C47.247 51.3832 47.3264 50.9414 47.4209 50.6447C47.5175 50.3412 47.6671 50.0707 47.8094 49.8517C48.0941 49.4133 48.4755 48.9911 48.8146 48.6493C49.2537 48.2069 49.722 47.746 50.2321 47.3841C50.8478 46.9473 51.7304 47.0106 52.1476 47.6257ZM40.7664 49.3267C41.6159 49.2361 42.3774 49.8572 42.4673 50.7139C42.6221 52.1901 42.9927 53.747 43.7094 54.8178C44.1873 55.5319 44.0007 56.5015 43.2927 56.9835C42.5846 57.4655 41.6232 57.2773 41.1453 56.5632C40.0034 54.857 39.5636 52.6882 39.391 51.0421C39.3011 50.1854 39.9169 49.4174 40.7664 49.3267Z'/></svg>");
}
.mp-icon-discord {
    --icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path fill='white' d='M55.91 25.549c-3.028-1.405-6.199-2.378-9.442-2.919-0.433 0.793-0.864 1.621-1.225 2.451-3.459-0.54-7.027-0.54-10.488 0-0.36-0.83-0.757-1.658-1.225-2.451-3.279 0.54-6.451 1.55-9.478 2.919-5.946 8.865-7.568 17.479-6.776 25.984v0c3.495 2.595 7.424 4.542 11.605 5.839 0.937-1.261 1.767-2.595 2.487-4.001-1.37-0.504-2.667-1.117-3.929-1.874 0.324-0.253 0.65-0.47 0.973-0.721 7.351 3.459 15.858 3.459 23.172 0 0.324 0.253 0.648 0.504 0.973 0.721-1.261 0.721-2.558 1.37-3.929 1.874 0.721 1.405 1.55 2.739 2.487 4.001 4.181-1.261 8.108-3.244 11.605-5.803v0c0.937-9.911-1.621-18.453-6.811-26.020zM32.413 46.307c-2.271 0-4.145-2.054-4.145-4.577s1.802-4.577 4.109-4.577 4.181 2.054 4.145 4.577-1.838 4.577-4.109 4.577zM47.621 46.307c-2.271 0-4.109-2.054-4.109-4.577s1.802-4.577 4.109-4.577 4.145 2.054 4.109 4.577-1.802 4.577-4.109 4.577z'/></svg>");
}
.mp-icon-youtube {
    --icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path fill='white' d='M60.042 31.82c0 0-0.4-2.819-1.629-4.058-1.558-1.629-3.299-1.637-4.098-1.733-5.719-0.415-14.307-0.415-14.307-0.415h-0.015c0 0-8.588 0-14.307 0.415-0.799 0.096-2.54 0.104-4.098 1.733-1.231 1.238-1.622 4.058-1.622 4.058s-0.408 3.308-0.408 6.622v3.099c0 3.307 0.408 6.622 0.408 6.622s0.4 2.819 1.622 4.058c1.558 1.629 3.603 1.574 4.513 1.75 3.276 0.312 13.907 0.408 13.907 0.408s8.595-0.015 14.315-0.423c0.799-0.096 2.541-0.104 4.098-1.733 1.229-1.238 1.629-4.058 1.629-4.058s0.408-3.307 0.408-6.622v-3.099c-0.008-3.308-0.415-6.622-0.415-6.622zM35.775 45.304v-11.495l11.048 5.768-11.048 5.727z'/></svg>");
}
.mp-icon-reddit {
    --icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path fill='white' d='M59.007 38.939c0 1.655-0.933 3.076-2.313 3.776 0.169 0.658 0.255 1.337 0.255 2.036 0 6.703-7.573 12.134-16.907 12.134-9.313 0-16.885-5.431-16.885-12.134 0-0.679 0.085-1.357 0.234-1.995-1.422-0.701-2.397-2.142-2.397-3.819 0-2.332 1.888-4.221 4.221-4.221 1.21 0 2.291 0.509 3.076 1.337 2.864-1.995 6.681-3.288 10.924-3.436l2.46-11.052c0.085-0.381 0.489-0.636 0.87-0.552l7.828 1.718c0.509-1.019 1.59-1.739 2.822-1.739 1.761 0 3.183 1.422 3.183 3.161 0 1.761-1.422 3.183-3.183 3.183-1.739 0-3.161-1.422-3.161-3.161l-7.086-1.571-2.207 10.013c4.264 0.127 8.125 1.4 11.009 3.395 0.764-0.807 1.846-1.294 3.034-1.294 2.332 0 4.221 1.888 4.221 4.221zM29.859 43.161c0 1.761 1.422 3.183 3.161 3.183 1.761 0 3.183-1.422 3.183-3.183 0-1.739-1.422-3.161-3.183-3.161-1.739 0-3.161 1.422-3.161 3.161zM47.043 50.691c0.318-0.318 0.318-0.785 0-1.103-0.297-0.297-0.785-0.297-1.082 0-1.273 1.294-4.009 1.739-5.961 1.739s-4.688-0.446-5.961-1.739c-0.297-0.297-0.785-0.297-1.082 0-0.318 0.297-0.318 0.785 0 1.103 2.015 2.015 5.898 2.164 7.043 2.164s5.028-0.149 7.043-2.164zM46.98 46.344c1.739 0 3.161-1.422 3.161-3.183 0-1.739-1.422-3.161-3.161-3.161-1.761 0-3.183 1.422-3.183 3.161 0 1.761 1.422 3.183 3.183 3.183z'/></svg>");
}
.mp-icon-x {
    --icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path fill='white' d='M43.969 36.923l13.507-15.582h-3.2l-11.728 13.53-9.366-13.53h-10.804l14.165 20.46-14.165 16.34h3.2l12.385-14.288 9.892 14.288h10.804l-14.69-21.218zM39.585 41.981l-12.854-18.249h4.916l22.629 32.126h-4.916l-9.775-13.878z'/></svg>");
}
.mp-icon-instagram {
    --icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path fill='white' d='M40.291 24.010c5.117 0 5.698 0 7.733 0.116 1.86 0.058 2.849 0.407 3.547 0.639 0.872 0.349 1.512 0.756 2.209 1.453s1.105 1.279 1.453 2.209c0.232 0.698 0.581 1.686 0.639 3.547 0.116 2.035 0.116 2.616 0.116 7.733s0 5.698-0.116 7.733c-0.058 1.86-0.407 2.849-0.639 3.547-0.349 0.872-0.756 1.512-1.453 2.209s-1.279 1.105-2.209 1.453c-0.698 0.232-1.686 0.581-3.547 0.639-2.035 0.116-2.616 0.116-7.733 0.116s-5.698 0-7.733-0.116c-1.86-0.058-2.849-0.407-3.547-0.639-0.872-0.349-1.512-0.756-2.209-1.453s-1.105-1.279-1.453-2.209c-0.232-0.698-0.581-1.686-0.639-3.547-0.116-2.035-0.116-2.616-0.116-7.733s0-5.698 0.116-7.733c0.058-1.86 0.407-2.849 0.639-3.547 0.349-0.872 0.756-1.512 1.453-2.209s1.279-1.105 2.209-1.453c0.698-0.232 1.686-0.581 3.547-0.639 2.035-0.058 2.616-0.116 7.733-0.116zM40.291 20.58c-5.175 0-5.814 0-7.85 0.116s-3.43 0.407-4.651 0.872c-1.279 0.465-2.326 1.163-3.372 2.209s-1.744 2.151-2.209 3.372c-0.465 1.221-0.814 2.616-0.872 4.651-0.116 2.035-0.116 2.675-0.116 7.907s0 5.814 0.116 7.85c0.116 2.035 0.407 3.43 0.872 4.651 0.465 1.279 1.163 2.326 2.209 3.372s2.151 1.744 3.372 2.209c1.221 0.465 2.616 0.814 4.651 0.872 2.035 0.116 2.675 0.116 7.85 0.116s5.814 0 7.85-0.116c2.035-0.116 3.43-0.407 4.651-0.872 1.279-0.465 2.326-1.163 3.372-2.209s1.744-2.151 2.209-3.372c0.465-1.221 0.814-2.616 0.872-4.651 0.116-2.035 0.116-2.675 0.116-7.85s0-5.814-0.116-7.85c-0.116-2.035-0.407-3.43-0.872-4.651-0.465-1.279-1.105-2.326-2.209-3.372-1.046-1.046-2.151-1.744-3.372-2.209s-2.616-0.814-4.651-0.872c-2.035-0.116-2.675-0.175-7.85-0.175 0 0 0 0 0 0zM40.291 29.883c-5.407 0-9.826 4.419-9.826 9.826s4.419 9.826 9.826 9.826 9.826-4.419 9.826-9.826-4.419-9.826-9.826-9.826zM40.291 46.047c-3.489 0-6.338-2.849-6.338-6.338s2.849-6.338 6.338-6.338 6.338 2.849 6.338 6.338-2.849 6.338-6.338 6.338zM52.792 29.476c0 1.279-1.046 2.268-2.268 2.268s-2.268-1.046-2.268-2.268 0.988-2.268 2.209-2.268 2.326 1.046 2.326 2.268z'/></svg>");
}
.mp-icon-tiktok {
    --icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path fill='white' d='M56.397 36.63c-0.011 0-0.024 0-0.038 0-3.36 0-6.468-1.077-8.998-2.906l0.045 0.032v13.087c-0.003 6.571-5.331 11.898-11.903 11.898-6.574 0-11.903-5.328-11.903-11.903s5.328-11.903 11.903-11.903c0.577 0 1.144 0.040 1.697 0.12l-0.064-0.007v6.581c-0.49-0.16-1.054-0.252-1.639-0.252-3.018 0-5.464 2.446-5.464 5.464s2.446 5.464 5.464 5.464c3.018 0 5.464-2.446 5.464-5.464 0 0 0 0 0 0v0-25.583h6.443c0 0.022 0 0.047 0 0.073 0 0.548 0.049 1.084 0.144 1.605l-0.009-0.055c0.476 2.479 1.919 4.552 3.914 5.853l0.035 0.022c1.38 0.924 3.077 1.475 4.904 1.475 0 0 0.002 0 0.002 0v0z'/></svg>");
}
.mp-icon-facebook {
    --icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><path fill='white' d='M44.278 26.336h6.577v-7.854h-6.577c-5.044 0-9.194 4.086-9.194 9.194v3.959h-5.236v7.854h5.236v20.943h7.854v-21.007h6.577l1.341-7.854h-7.917v-3.959c0-0.702 0.575-1.277 1.341-1.277z'/></svg>");
}
/* Button END */

/* Navigation START */
.mp-navigation-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: auto;
    --icon-base-width: 90px;
    --icon-max-width: 225px;
}

/* Responsive icon size */
@media screen and (min-width: 1490px) {
    .mp-card {
        --icon-base-width: 125px;
    }
    .vector-feature-limited-width-clientpref-0 .mp-card {
        --icon-base-width: 175px;
    }
}

.mp-card {
    flex: 1 auto;
    width: var(--icon-base-width);
    max-width: var(--icon-max-width);
    display: flex;
    flex-direction: column;
    background: var(--background-color-1);
    border-radius: 10px;
}

.mp-card-text {
    position: relative;
    cursor: pointer;
    user-select: none;
    text-align: center;
    background-color: var(--background-color-2);
    color: var(--color-base);
    border-radius: 0 0 10px 10px;
    flex: 1;
    font-size: 1em;
    padding: 0.25em;
}

.mp-card-text a,
.mp-card-text a:hover {
    text-decoration: none;
    /* color: var(--color-base); */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 10px 0 0;
}

.mp-card:hover {
    background-color: var(--background-color-1b);
}

.mp-card:hover .mp-card-image {
    background-color: var(--background-color-2);
}

.mp-card:hover .mp-card-text {
    background-color: var(--background-color-3);
}

.mp-card-image a {
    padding: 12px 0;
}

.mp-card-image a,
.mp-card-image span {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
}

.mp-card-image img {
    max-width: unset !important;
    width: 60px !important;
    height: 60px !important;
    object-fit: contain;
}

@media screen and (max-width: 950px) {
    .mp-card-text {
        font-size: 12px;
    }

    .mp-card-image a {
        padding: 6px 0;
    }

    .mp-card-image img {
        width: 50px !important;
        height: 50px !important;
    }
}
/* Navigation END */

/* Highlight START */
.mp-highlight-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mp-highlight {
    flex: 1 1 0;
    min-width: 300px;
    min-height: calc(150px + 5vh);
    max-height: 300px;
    position: relative;
    padding: 0;
}

.mp-highlight-image {
    position: absolute;
    inset: 0;
}

.mp-highlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}
/* Highlight END */