/* PREFIXES */
/* sc is for satoshi club */
/* ath is for ath reached  */
/* tg is for top gainers  */
/* np is for new partnerships  */

:root {
    --accent-orange: #e2834b;
}

@font-face {
    font-family: "SF Pro Display Light";
    src: url("../fonts/SFProDisplay-Light.ttf") format("truetype");
}

@font-face {
    font-family: "SF Pro Display Bold";
    src: url("../fonts/SFPRODISPLAYBOLD.ttf") format("truetype");
}

@font-face {
    font-family: "SF Pro Display Regular";
    src: url("../fonts/SFPRODISPLAYREGULAR.ttf") format("truetype");
}

* {
    letter-spacing: 1px;
    box-sizing: border-box;
    /* border: solid 1px red; */
}

body {
    padding: 0;
    margin: 0;
}

h1 {
    font-family: "SF Pro Display Bold";
}

span.accent-color {
    color: var(--accent-orange);
}

mark {
    color: var(--accent-orange);
    background: none;
    font-family: "SF Pro Display Bold";
}

.ath-body-tag {
    color: #fff;
    font-family: "SF Pro Display Light", sans-serif;
}

.tg-body-tag {
    color: #303d57;
    font-family: "SF Pro Display Regular", sans-serif;
}

.opacity-6 {
    opacity: 0.6;
}

.sc-main {
    padding-top: 2rem;
    min-height: 100vh;
    position: relative;
    padding-bottom: 5rem;
}

.ath-main {
    background: url("../images/athreached-main-bg.png") no-repeat top left / cover;
}

.tg-main {
    background: #f3f5fb;
}

.sc-wrapper {
    max-width: 1200px;
    margin: auto;
    padding: 0 2rem;
}

.sc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sc-heading h1 {
    margin: 0;
}

/* FOR SCREENSHOT */
.taking-screenshot #filters,
.taking-screenshot #topGainers,
.taking-screenshot #ATHSort,
.taking-screenshot #ATHMin,
.taking-screenshot .sc-save {
    display: none !important;
}

.taking-screenshot .sc-card-serial .ath-card-serial-span,
.taking-screenshot .coin-placeholder-txt span,
.taking-screenshot .sc-card-serial .tg-card-serial-span {
    background: none;
}
/* FOR SCREENSHOT */

.sc-header .sc-date span {
    background: var(--accent-orange);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    display: inline-block;
}

.sc-header .ath-date span {
    color: #fff;
}

.sc-header .tg-date span {
    color: #fff;
}

footer.sc-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1rem 0;
}

footer.ath-footer {
    background: #303d57;
}

footer.tg-footer {
    background: #fff;
    box-shadow: 0px -8px 32px rgba(50, 66, 79, 0.16);
}

footer.sc-footer .in-sc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sc-social {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sc-social-icon {
    display: flex;
    align-items: center;
    margin-left: 2rem;
}

.sc-social-icon a {
    text-decoration: none;
}

.ath-social-icon a {
    color: #fff;
}

.tg-social-icon a {
    color: #303d57;
}

.sc-social-icon img {
    margin-right: 0.6rem;
}

/* sc-body */
.sc-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    margin: 2rem 0;
}

.ev-body {
    column-gap: 1.5rem;
}

.sc-body a {
    text-decoration: none;
    margin-bottom: 1.3rem;
}

.ath-body a {
    color: #fff;
}

.tg-body a {
    color: #303d57;
}

.sc-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 50fr;
    align-items: center;
    border-radius: 8px;
    padding: 1.2rem 1.2rem 1.2rem 0;
}

.ath-card {
    background: #303d57;
}

.tg-card {
    background: #fff;
    box-shadow: 0px 8px 32px rgba(50, 66, 79, 0.16);
}

.sc-card-icon {
    margin-left: -1.5rem;
    margin-right: 1rem;
}

.sc-card-heading .coin-shortname {
    font-size: 2rem;
    margin-right: 0.4rem;
    font-weight: bold;
}

.tg-card-heading .coin-shortname {
    font-family: "SF Pro Display Bold";
}

.coin-fullname {
    font-size: small;
}

.sc-card-body {
    display: grid;
    row-gap: 1rem;
    margin-right: 3rem;
}

.sc-card-body-top {
    display: flex;
    justify-content: space-between;
}

.sc-card-body-bottom {
    display: grid;
    grid-auto-flow: column;
    gap: 1rem;
}

.sc-info-heading {
    margin-bottom: 0.5rem;
    font-size: small;
}

.sc-info-data--24h {
    display: flex;
    align-items: center;
}

.ath-info-data--24h {
    color: #5df4b8;
}

.tg-info-data--24h {
    color: #3fb692;
}

.sc-info-data--24h img {
    margin-left: 0.5rem;
}

.sc-info-data--topexchange {
    display: flex;
    align-items: center;
}

.sc-info-data--topexchange .topexchange-logo {
    margin-right: 0.5rem;
    line-height: 0;
}

.sc-card-serial {
    position: absolute;
    right: 0.5rem;
}

.sc-card-serial .sc-card-serial-span {
    font-size: 8rem;
    font-weight: bold;
    line-height: 100px;
    opacity: 0.1;
    font-family: "SF Pro Display Bold";
}

.sc-card-serial .ath-card-serial-span {
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sc-card-serial .tg-card-serial-span {
    background: -webkit-linear-gradient(#333, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sc-card-graph {
    max-width: 120px;
}

/* EVENTS PAGE */

.ev-card {
    position: relative;
    display: grid;
    align-items: center;
    border-radius: 8px;
    padding: 1.2rem 1.6rem;
    background: #303d57;
}

.ev-header {
    display: block;
}

.ev-card-body {
    display: grid;
}

.ev-card-body-top {
    flex-direction: column;
}

.sc-card-body-top h3 {
    margin: 0;
}

.sc-card-body-top p {
    font-size: small;
    margin: 0.5rem 0;
}

.ev-card-body-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 0.8rem;
}

.sc-coin-label {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sc-coin-label .sc-coin-logo {
    margin-right: 0.5rem;
    width: 40px;
}

.sc-coin-label .sc-coin-logo img {
    width: 100%;
}

.sc-coin-label .sc-coin-name .sc-coin-shortname {
    font-weight: bold;
}

.sc-coin-label .sc-coin-name .sc-coin-fullname {
    font-size: small;
}

.sc-card-date {
    display: flex;
    align-items: center;
}

.sc-card-date span {
    margin-left: 0.5rem;
    text-decoration: underline;
}

/* NEW PARTNESHIPS PAGE */

.np-main {
    display: flex;
}

.two-col-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.date-btn span {
    background: var(--accent-orange);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    display: inline-block;
}

.np-txt h1 {
    font-size: 5.5rem;
    margin: 2rem 0;
}

.np-txt p {
    font-size: 1.5rem;
    line-height: 2.25rem;
    font-family: "SF Pro Display Regular";
}

.np-txt p .accent-color {
    font-weight: bold;
}

.coin-card {
    background: linear-gradient(108.08deg, #374156, rgb(45 59 90 / 47%) 100%);
    border-radius: 32px;
    padding: 2rem;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.coin-name-with-logo {
    display: flex;
    align-items: center;
    max-width: 50px;
    border-radius: 25px;
}

.coin-name-with-logo img {
    width: 100%;
    border-radius: 25px;
}

.coin-name-with-logo .coin-name {
    margin-left: 1rem;
    font-size: 2rem;
    font-family: "SF Pro Display Bold";
}

.coin-card .social-id {
    display: flex;
    align-items: center;
}

.coincard-top,
.coincard-bottom {
    display: flex;
    justify-content: space-between;
}

.coincard-top {
    align-items: flex-start;
}

.coincard-top h3 {
    margin-bottom: 0;
    margin-top: 1rem;
    font-size: 2rem;
}

.coincard-bottom {
    align-items: flex-end;
}

.coin-placeholder-icon {
    max-width: 150px;
}

.coin-placeholder-icon img {
    filter: brightness(100000%) contrast(0);
    opacity: 0.08;
    width: 100%;
}

.coin-placeholder-txt span {
    font-size: 6rem;
    line-height: 0;
    font-family: "SF Pro Display Bold";
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.1;
}

.coin-card .social-id img {
    width: 20px;
    margin-right: 0.5rem;
}

.collaboration-icon-main {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    position: relative;
}

.collaboration-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-orange);
    border-radius: 100%;
    position: absolute;
    top: -2rem;
}

/* NFT COLLECTIBLE RANKINGS PAGE */

.nc-body {
    background: #303d57;
    box-shadow: 0px 4px 16px rgba(22, 21, 54, 0.3);
    border-radius: 8px;
    margin: 2rem 0;
    padding: 4rem 4rem 5rem 4rem;
    overflow: hidden;
}

.grid-portion {
    color: #b7bbc4;
    font-size: small;
}

.vertical-grid-portion {
    border-bottom: dashed 2px #3c4962;
    padding: 1rem 0;
    height: 100px;
    display: flex;
    align-items: flex-end;
}

.horizontal-grids-main {
    width: 100%;
    position: relative;
    height: 70px;
    left: 3rem;
}

.horizontal-grids {
    display: grid;
    grid-auto-flow: column;
    margin-top: 2rem;
    position: absolute;
    width: 100%;
    bottom: 0;
    align-items: flex-end;
}

.horizontal-grid-portion {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chart-line {
    width: 2px;
    /* height: 270px; */
    background: linear-gradient(180deg, #9deed2 0%, rgba(157, 238, 210, 0) 100%);
    margin-bottom: 32px;
}

.chart-line::before {
    content: "";
    position: absolute;
    border-radius: 100%;
    border: 3px solid #9deed2;
    box-shadow: 0px 0px 10px rgba(157, 238, 210, 0.4), 0px 5px 10px rgba(35, 43, 64, 0.5);
    width: 12px;
    height: 12px;
    margin-left: -8px;
    margin-top: -18px;
}

.value-label {
    text-align: center;
    background: #455168;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    line-height: 1.3rem;
    margin-bottom: 2.5rem;
}

.value-label .exact-point {
    color: #fff;
}

.percentage-change {
    color: #5df4b8;
}

.value-label .percentage-change svg {
    margin-bottom: 2px;
}

.percentage-change svg {
    fill: #5df4b8;
}

.percentage-down {
    color: #f36079;
}

.percentage-down svg {
    fill: #f36079;
    transform: rotate(180deg);
}

.point-down-triangle-main {
    display: flex;
    justify-content: center;
    margin-bottom: -18px;
}

.point-down-triangle {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #455168;
    margin-top: 8px;
}

.collectible-img-main {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.name-with-logo {
    max-width: 80px;
}

.collectible-img {
    height: 40px;
    /* width: 100px; */
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    flex-direction: column;
    text-align: center;
}

.collectible-img div {
    margin-top: 0.5rem;
}

.collectible-img img {
    max-width: 100px;
    max-height: 40px;
}

.nc-header__right {
    display: flex;
    align-items: center;
}

.sc-save {
    margin-left: 1rem;
    line-height: 0;
    cursor: pointer;
    /* text-align: right; */
}

.sc-save img {
    width: 40px;
}

.np-wrapper {
    position: relative;
}

.np-wrapper .sc-save {
    margin: 0;
    margin-bottom: 2rem;
    display: inline-block;
}

/* PERPETUAL CONTRACT LIQUIDATIONS */

.pcl-body {
    background: #303d57;
    box-shadow: 0px 4px 16px rgba(22, 21, 54, 0.3);
    border-radius: 8px;
    margin: 2rem 0;
    padding: 4rem 4rem 5rem 8rem;
    overflow: hidden;
    position: relative;
}

.pcl-body h2 {
    text-align: center;
    font-family: "SF Pro Display Bold", sans-serif;
    margin: 0;
    line-height: 0;
}

.pcl-chart-line {
    width: 2px;
    border-radius: 10px;
    border-top-right-radius: 0;
    position: relative;
}

.pcl-chart-line::before {
    content: "";
    position: absolute;
    width: 25px;
}

.pcl-percentage-value {
    position: absolute;
    right: -4rem;
    top: -7px;
}

.pcl-chart-line-shorts {
    background: #e38080;
    width: 45px;
    margin-bottom: 0.6rem;
}

.pcl-chart-line-shorts::before {
    border: 1px solid #e38080;
    margin-left: 2rem;
}

.pcl-chart-line-longs {
    background: #9deed2;
    width: 60px;
    margin-bottom: 32px;
}

.pcl-chart-line-longs::before {
    border: 1px solid #9deed2;
    margin-left: 3rem;
}

.pcl-value-label {
    margin-bottom: 1rem;
    border-bottom: solid 1px #a3a3a3;
}

.pcl-value-label .exact-point {
    color: #fff;
    font-size: 1rem;
}

.pcl-chart-labels {
    display: flex;
    position: absolute;
    left: -3rem;
    top: 50%;
    transform: rotate(-90deg);
}

.pcl-chart-label-main {
    font-size: small;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    margin-right: 5rem;
    color: #b7bbc4;
}

.pcl-chart-label-main:last-of-type {
    margin-right: 0;
}

.pcl-chart-label-main .label-color {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    margin-right: 0.5rem;
}

.pcl-chart-label-main .label-color--green {
    background: #9deed2;
}
.pcl-chart-label-main .label-color--red {
    background: #e38080;
}

.pcl-horizontal-grids {
    display: grid;
    grid-auto-flow: column;
    margin-top: 2rem;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: -3rem;
    align-items: flex-end;
}

/* IEO RETURN ON INVESTMENT */

.ieo-body {
    background: #303d57;
    box-shadow: 0px 4px 16px rgba(22, 21, 54, 0.3);
    border-radius: 8px;
    margin: 2rem 0;
    padding: 2rem;
    overflow: hidden;
    position: relative;
}

.ieo-body table {
    width: 100%;
    border-collapse: collapse;
}

.ieo-body table thead tr td {
    text-transform: uppercase;
    color: #b7bbc4;
    font-size: small;
}

.ieo-body table tr td {
    padding: 1.2rem 0;
    /* border: solid 1px #455168; */
    vertical-align: middle;
}

.ieo-body table tr td:nth-child(1) {
    width: 5%;
}

.ieo-body table tr td:nth-child(2) {
    width: 15%;
}

.ieo-body table tr td:nth-child(3) {
    width: 15%;
}

.ieo-body table tr td:last-of-type {
    text-align: right;
}

.ieo-topexchange {
    display: inline-flex;
    align-items: center;
    background: #455168;
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

.ieo-topexchange span {
    line-height: 0;
}

.ieo-topexchange img {
    margin-right: 0.5rem;
}

td.ieo-chart-td {
    display: flex;
    height: 80px;
    align-items: flex-end;
}

.ieo-chartline {
    position: relative;
    height: 2px;
}

.ieo-chartline::after {
    content: "";
    position: absolute;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    margin-top: -8px;
    margin-left: -18px;
    background: #303d57;
}

.ieo-currentvalue-chartline {
    background: linear-gradient(-90deg, #9deed2 0%, rgba(157, 238, 210, 0) 100%);
}

.ieo-currentvalue-chartline::after {
    border: 3px solid #9deed2;
    box-shadow: 0px 0px 10px rgb(157 238 210 / 40%), 0px 5px 10px rgb(35 43 64 / 50%);
}

.ieo-ath-chartline {
    background: linear-gradient(-90deg, #8d76ff 0%, rgba(157, 238, 210, 0) 100%);
}

.ieo-ath-chartline::after {
    border: 3px solid #8d76ff;
    box-shadow: 0px 0px 10px rgba(141, 118, 255, 0.4), 0px 5px 10px rgba(35, 43, 64, 0.5);
}

.ieo-chart-label {
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    font-family: "SF Pro Display Regular";
    user-select: auto;
    position: absolute;
    bottom: 1.2rem;
    font-size: small;
}

.ieo-currentvalue-chartline .ieo-chart-label {
    background: rgb(157, 238, 210);
    color: rgb(32, 43, 68);
    right: -1.8rem;
}

.ieo-ath-chartline .ieo-chart-label {
    background: #8d76ff;
    color: #fff;
    right: 0;
}

.ieo-body table thead tr td:last-of-type {
    display: flex;
    justify-content: flex-end;
}

.ieo-legend {
    text-transform: capitalize;
    display: flex;
    align-items: center;
    background: #4f596e;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    margin-right: 2rem;
}

.ieo-legend:last-of-type {
    margin-right: 0;
}

.legend-marker {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    margin-right: 0.5rem;
}

.legend-marker-currentvalue {
    border: solid 2px #9deed2;
}

.legend-marker-ath {
    border: solid 2px #8d76ff;
}

/* AMA SERIES */

.ama-wrapper {
    width: 1200px;
    padding: 0 6rem;
}

.ama-two-col-wrapper {
    grid-template-columns: 1.3fr 1fr;
    gap: 0;
}

.ama-main .logo-with-name {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.ama-main .logo-with-name .logo {
    max-width: 80px;
}

.ama-main .logo-with-name img {
    width: 100%;
}

.ama-main .logo-with-name h2 {
    font-size: 3.2rem;
    font-family: "SF Pro Display Bold", sans-serif;
    margin: 0;
    color: var(--accent-orange);
}

.ama-two-col-wrapper h1 {
    margin: 1.2rem 0 2.4rem 0;
}

.ama-main .btn-group {
    display: flex;
    gap: 1rem;
}

.ama-coin-card {
    background: linear-gradient(108.08deg, #374156, rgb(45 59 90 / 47%) 100%);
    border-radius: 32px;
    min-height: 300px;
    overflow: hidden;
}

.ama-coin-card .coincard-top {
    padding: 7rem 2rem;
    display: block;
    text-align: center;
}

.ama-coin-card .coincard-top .main-img {
    max-width: 150px;
    margin: auto;
}

.ama-coin-card .coincard-top img {
    width: 100%;
}

.ama-coin-card .coincard-bottom {
    /* background: #4f596e; */
    background: linear-gradient(108.08deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
    justify-content: center;
}

.ama-coin-card .coincard-bottom .total-prizepool {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 3rem 0;
}

.ama-coin-card .coincard-bottom .total-prizepool span {
    font-size: 1.4rem;
}

.ama-coin-card .coincard-bottom .total-prizepool .trophy-icon {
    background: rgba(226, 131, 75, 0.2);
    border: 3px solid var(--accent-orange);
    width: 90px;
    height: 90px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ama-main .btn-group .btn {
    background: #4f596e;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.price-forprizepool {
    font-size: 3.5rem;
    font-family: "SF Pro Display Bold";
}

/* ATH VS AT LOW */

.ava-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ava-wrapper {
    max-width: 800px;
}

.ava-card {
    display: block;
    padding: 0;
    overflow: hidden;
}

.ava-main-coin {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.ava-card-body-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem;
}

.ava-card-body-bottom {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(108.08deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
    gap: 0;
}

.ava-card-body-bottom .sc-card-info-col {
    padding: 1.2rem;
}

.ava-card-body-bottom .sc-card-info-col:nth-child(2) {
    margin-left: -50px;
}

.ava-card-body-top .sc-card-info-col:last-of-type {
    margin-right: 16px;
}

.ava-card-body-bottom .sc-card-info-col.hvl-roi {
    background: rgb(82, 255, 186, 0.12);
}

.barline-info-col {
    display: flex;
    align-items: flex-end;
    gap: 1.4rem;
}

.at-low--bar {
    position: relative;
    width: 300px;
    margin-bottom: 4px;
}

.bar-line-full {
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.bar-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #fff;
}

.ava-value-label {
    position: absolute;
    bottom: 1.2rem;
    right: -60px;
    margin-bottom: 0;
    box-shadow: 0px 10px 14px rgb(26 31 42 / 48%);
    border: solid 1px rgba(255, 255, 255, 0.1);
}

.ava-value-label .point-down-triangle-main {
    margin-bottom: -17px;
}

/* iPAD PRO */
@media screen and (max-width: 1200px) {
    .sc-body {
        column-gap: 2rem;
    }

    .sc-card-body {
        margin-right: 0;
    }

    .sc-info-heading {
        font-size: 11px;
    }

    .sc-info-data {
        font-size: 13px;
    }
}

/* iPAD */
@media screen and (max-width: 1023px) {
    .sc-card-body-bottom {
        grid-auto-flow: unset;
        grid-template-columns: 1fr 1fr;
    }
    .two-col-wrapper {
        display: block;
    }
    .ama-wrapper {
        width: unset;
        max-width: 1200px;
    }
    .ama-main .btn-group {
        flex-direction: column;
    }
    .ama-main .btn-group .btn {
        justify-content: center;
    }
    .ama-coin-card {
        margin: 2rem 0;
    }
    .ama-main .logo-with-name h2 {
        font-size: 2rem;
    }
    .ama-main .logo-with-name .logo {
        max-width: 60px;
    }
    .ama-two-col-wrapper h1 {
        margin: 2rem 0;
    }
}

/* PHONE */
@media screen and (max-width: 767px) {
    .sc-main {
        padding-bottom: 12rem;
    }

    .sc-header .sc-heading {
        max-width: 160px;
    }

    .ss-header .sc-heading {
        max-width: unset;
    }

    .sc-header .sc-heading img {
        width: 100%;
    }

    .sc-body {
        grid-template-columns: 1fr;
    }

    .sc-card-body-bottom {
        grid-auto-flow: unset;
        grid-template-columns: 1fr 1fr;
    }

    footer.sc-footer .in-sc-footer {
        display: block;
    }

    .sc-social {
        display: block;
    }

    .sc-social-icon {
        margin-left: 0;
        margin: 1rem 0;
    }

    /* NEW PARTNERSHIPS */
    .np-main {
        display: block;
    }

    .coin-name-with-logo {
        transform: scale(0.7) translateX(-30%);
    }

    .coin-placeholder-txt span {
        font-size: 3rem;
    }

    .coin-placeholder-icon img {
        width: 120px;
    }

    .two-col-wrapper {
        display: block;
    }

    .np-txt h1 {
        font-size: 3rem;
    }

    .np-cards .coin-card {
        min-height: 250px;
    }

    .np-cards .coin-card:last-child {
        margin-bottom: 2rem;
    }
}

/* VERY SMALLER PHONES */
@media screen and (max-width: 320px) {
    .sc-header .sc-date span {
        font-size: 10px;
        padding: 0.8rem 0.6rem;
    }
    .np-txt h1 {
        font-size: 2rem;
    }
    .coin-placeholder-txt span {
        font-size: 1.2rem;
    }

    .coin-placeholder-icon {
        margin-left: -3rem;
    }
    .coin-placeholder-icon img {
        width: 30px;
    }
}
