.dapps-single-dapp {
    position: relative;

    display: flex;
    flex-direction: row;

    border-radius: 8px;
    background: radial-gradient(3327.9% 19350.94% at 55.79% 50%, #F1F1F1 0%, #F0F0F0 100%);
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04) inset;

    transition: 0.3s background-color, 0.3s background-image;
}

.starknet-ui-dark .dapps-single-dapp {
    background: radial-gradient(3327.9% 19350.94% at 55.79% 50%, #222127 0%, #1E1B26 100%);
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.15) inset;
}

.dapps-single-dapp .dapps-single-dapp_back {
    background: url('data:image/svg+xml,<svg width="1383" height="763" viewBox="0 0 1383 763" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(%23filter0_f_0_1)"><path d="M1224.83 520.679C1224.83 485.431 1018.7 479.497 947.144 416.892C876.951 355.48 903.972 278 861.886 278C776.897 278 708 334.603 708 404.427C708 474.251 776.897 530.854 861.886 530.854C946.875 530.854 1224.83 590.502 1224.83 520.679Z" fill="%236A32C6"/></g><g filter="url(%23filter1_f_0_1)"><path d="M184.092 516.517C158.855 466.324 566.076 143.284 580.925 186.809C615.161 287.164 474.338 359.03 583.777 343.195C776.041 315.374 737.343 478.527 758.344 514.622C781.793 509.241 802.052 504.474 819.448 500.281C984.105 460.591 892.164 472.273 819.448 500.281C806.476 505.277 794.116 510.793 783.934 516.629C770.461 524.351 762.96 522.556 758.344 514.622C735.375 519.893 709.347 525.754 679.952 532.244C345.579 606.066 245.507 590.16 184.092 516.517Z" fill="url(%23paint0_linear_0_1)" fill-opacity="0.8"/></g><defs><filter id="filter0_f_0_1" x="549.95" y="119.95" width="832.926" height="592.689" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="79.0252" result="effect1_foregroundBlur_0_1"/></filter><filter id="filter1_f_0_1" x="0.629684" y="0.451218" width="1093.29" height="762.196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="91.1683" result="effect1_foregroundBlur_0_1"/></filter><linearGradient id="paint0_linear_0_1" x1="719.136" y1="455.783" x2="672.344" y2="213.753" gradientUnits="userSpaceOnUse"><stop stop-color="%234C3DFB"/><stop offset="0.458466" stop-color="%2313B6B6"/><stop offset="1" stop-color="%23320F76"/></linearGradient></defs></svg>') center center no-repeat, #CAA7F7;
    box-shadow: 0px 0px 12px 0px rgba(157, 177, 247, 0.25), 0px 1px 2px 0px rgba(92, 118, 210, 0.35);
}

.starknet-ui-dark .dapps-single-dapp .dapps-single-dapp_back {
    background: url('data:image/svg+xml,<svg width="390" height="254" viewBox="0 0 390 254" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_134_2666)"><g filter="url(%23filter0_f_134_2666)"><path d="M471.827 136.679C471.827 101.431 265.703 95.4969 194.146 32.8917C123.953 -28.5197 150.973 -106 108.888 -106C23.8991 -106 -44.998 -49.3966 -44.998 20.427C-44.998 90.2507 23.8991 146.854 108.888 146.854C193.877 146.854 471.827 206.502 471.827 136.679Z" fill="%236A32C6"/></g><g filter="url(%23filter1_f_134_2666)"><path d="M522.015 458.814C497.988 509.599 -7.25352 387.471 17.9121 348.979C75.9356 260.229 219.251 326.987 139.412 250.479C-0.849792 116.069 151.558 46.1513 167.08 7.38345C148.407 -7.78574 132.181 -20.8197 118.169 -31.9492C-14.4561 -137.295 51.3395 -72.0224 118.169 -31.9492C130.091 -24.8006 142.045 -18.4539 152.912 -14.0208C167.291 -8.15503 170.493 -1.13834 167.08 7.38345C185.372 22.2419 206.011 39.1491 229.217 58.3219C493.201 276.422 542.257 365.085 522.015 458.814Z" fill="url(%23paint0_linear_134_2666)" fill-opacity="0.7"/></g><g filter="url(%23filter2_f_134_2666)"><path d="M-299.906 437.517C-325.143 387.324 82.078 64.2839 96.9266 107.809C131.162 208.164 -9.66052 280.03 99.7785 264.195C292.043 236.374 253.345 399.527 274.346 435.622C297.795 430.241 318.054 425.474 335.45 421.281C500.106 381.591 408.166 393.273 335.45 421.281C322.478 426.277 310.118 431.793 299.936 437.629C286.463 445.351 278.962 443.556 274.346 435.622C251.377 440.893 225.348 446.754 195.954 453.244C-138.419 527.066 -238.491 511.16 -299.906 437.517Z" fill="url(%23paint1_linear_134_2666)" fill-opacity="0.3"/></g></g><defs><filter id="filter0_f_134_2666" x="-203.049" y="-264.05" width="832.926" height="592.689" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="79.0252" result="effect1_foregroundBlur_134_2666"/></filter><filter id="filter1_f_134_2666" x="-165.334" y="-271.336" width="873.747" height="924.658" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="91.1683" result="effect1_foregroundBlur_134_2666"/></filter><filter id="filter2_f_134_2666" x="-483.368" y="-78.5488" width="1093.29" height="762.196" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="91.1683" result="effect1_foregroundBlur_134_2666"/></filter><linearGradient id="paint0_linear_134_2666" x1="144.838" y1="74.5" x2="-17.1194" y2="260.343" gradientUnits="userSpaceOnUse"><stop stop-color="%231948A3"/><stop offset="0.458466" stop-color="%23259D9D"/><stop offset="1" stop-color="%23160041"/></linearGradient><linearGradient id="paint1_linear_134_2666" x1="243.299" y1="358.542" x2="188.346" y2="134.753" gradientUnits="userSpaceOnUse"><stop offset="0.476842" stop-color="%235F6DED"/><stop offset="1" stop-color="%232E3CB7"/></linearGradient><clipPath id="clip0_134_2666"><rect width="389.333" height="254" fill="white" transform="translate(0.333984)"/></clipPath></defs></svg>') center center no-repeat, #3C156F;
    background-size: cover;
    box-shadow: 0px 0px 12px 0px rgba(138, 120, 247, 0.25), 0px 1px 2px 0px rgba(138, 120, 247, 0.35);
}

.dapps-single-dapp_front,
.dapps-single-dapp_back {
    border-radius: 8px;
}

.dapps-single-dapp_front {
    position: relative;

    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
    padding: 24px;

    border: 1px solid var(--border-divider, #EFEFEF);
    z-index: 2;

    flex-shrink: 0;
}

.starknet-ui-dark .dapps-single-dapp_front {
    border: 1px solid var(--border-divider, #313131);
}

.dapps-single-dapp:focus .dapps-single-dapp_front,
.dapps-single-dapp:focus-within .dapps-single-dapp_front,
.dapps-single-dapp:hover .dapps-single-dapp_front {
    /*position: absolute;*/
    /*top: 0; left: 0;*/

    opacity: 0;
    pointer-events: none;
}

.dapps-single-dapp_front small,
.dapps-single-dapp_front ul li {
    display: inline-block;
    padding: 0 12px;

    font-size: 14px;
    font-weight: 600;
    line-height: 21px;

    border-radius: 100px;
}

.dapps-single-dapp_front ul li {
    color: var(--text-secondary);
    text-transform: capitalize;
    background-color: var(--surface-card-d);
}

.dapps-single-dapp_front small {
    position: absolute;
    top: 16px; right: 16px;

    padding: 0 8px;

    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.04em;

    color: var(--text-primary-inverted);
    text-transform: uppercase;
    background-color: var(--surface-accent);
}

.dapps-single-dapp_front small[data-is-live="true"] {
    color: var(--text-secondary, #6B7280);
    background: var(--surface-hover, #FBFBFB);
}

.dapps-single-dapp_front small[data-is-live="false"] {
    color: var(--text-button-ghost, #6B7280);
    background: var(--surface-button-fill-disabled, #E9E8EA);
}

.starknet-ui-dark .dapps-single-dapp_front small[data-is-live="true"] {
    background: var(--text-secondary, #CCCCCC);
    background: var(--surface-chip-hover, #363636);
}

.starknet-ui-dark .dapps-single-dapp_front small[data-is-live="false"] {
    color: var(--text-button-ghost, #CCCCCC);
    background: var(--surface-chip-default, #1B1B1B);
}

.dapps-single-dapp.is-slim .dapps-single-dapp_front figure {
    margin: 0;
}

.dapps-single-dapp_front figure {
    width: 48px;
    height: 48px;

    margin: 0 0 12px;
}

.dapps-single-dapp_front figure img {
    width: 100%;
    height: 100%;

    border-radius: 50%;
    object-fit: cover;

    vertical-align: middle;
}

.dapps-single-dapp_front h3,
.starknet-post-inner .dapps-single-dapp_front h3 {
    width: 100%;
    margin: 0 0 8px;

    font-size: 18px;
    font-weight: 600;
    line-height: 25.2px;
    text-align: left;
    color: var(--text-primary);
}

.dapps-single-dapp p {
    width: 100%;
    display: -webkit-box;

    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;

    overflow: hidden;
    text-overflow: ellipsis;
}

.dapps-single-dapp .dapps-single-dapp_front p {
    margin: 0 0 20px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    align-self: flex-start;

    color: var(--text-secondary);
}

.dapps-single-dapp_front ul {
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    gap: 8px;
    margin-top: auto;
}

.dapps-single-dapp_back {
    height: 100%;
    width: 100%;

    /*position: absolute;*/
    /*top: 0; right: 0; bottom: 0; left: 0;*/

    display: flex;
    flex-direction: column;

    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: 0.8s opacity cubic-bezier(0.45, 1.45, 0.8, 1),
    0.8s background cubic-bezier(0.45, 1.45, 0.8, 1);
    z-index: 3;

    flex-shrink: 0;
    cursor: pointer;
}

.dapps-single-dapp.is-slim .dapps-single-dapp_back {
    cursor: default;
}

.dapps-single-dapp:hover .dapps-single-dapp_back,
.dapps-single-dapp:focus .dapps-single-dapp_back,
.dapps-single-dapp:focus-within .dapps-single-dapp_back {
    position: relative;
    margin-left: -100%;

    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.dapps-single-dapp_back p {
    display: block;
    margin: 0 0 24px;
    color: #fff;
}

.dapps-single-dapp_back ul:not(.dapps-single-dapp_back__tags) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: auto;
}

.dapps-single-dapp_back ul li img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.dapps-single-dapp_front figure span {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);

    border-radius: 50%;
    background: linear-gradient(119deg, #EC796B -25.87%, #D672EF 125.87%);
}