/* iPad or Custom Screens */
@media screen and (max-width: 1200px) {

    .thoxt-row {
        padding-right: 10px;
    }

    .row-thot {
        margin-bottom: 10px;
    }

    .thoxt-row-meta-desc {
        border-radius: 0;
    }

    .scroll-next {
        right: 25px;
    }

    .views-time {
        font-size: .9rem;
    }

    .news-row-content .views-time {
        font: 1em;
    }

    .row-article:not(.thoxt-row-thot-outer):hover .cover-image {
        transform: none;
    }
    
    .thoxt-row-article-outer:hover .thoxt-row-meta-desc {
        display: none;
    }
}

/* iPad-mini or similar Screens */
@media only screen and (max-width: 900px) {
    .thoxt-row-article-outer {
        width: calc(50% - 20px);
        overflow: visible;
    }
}

/* Mobile Screens */
@media only screen and (max-width: 600px) {

    body {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
    }

    h1,
    h2 {
        padding-left: 10px;
    }

    ::-webkit-scrollbar {
        display: none;
    }

    #mobile-menu {
        z-index: 100; /* Story modal goes on top of this */
    }

    .thoxt-rows-div {
        width: 100%;
        margin-top: 20px;
    }

    .thoxt-row {
        margin-right: 0px;
        margin-bottom: 20px;
        padding-right: 0px;
    }

    .see-all-link {
        font-size: .9rem;
    }

    .thoxt-row-content {
        flex-direction: column;
    }

    .thoxt-row-content.video-thots-row {
        flex-direction: row;
        gap: 10px;
         /* Don't want video thots to be full width */
    }

    .slide-row-content {
        flex-wrap: wrap;
        overflow-x: hidden;
        max-width: 100vw;
        touch-action: pan-y;
    }

    .thoxt-row-article-outer,
    .row-thot {
        width: 100%;
        max-width: 100%;
        margin: 17px 0;
    }

    .video-thots-row .thoxt-row-article-outer {
        width: calc(50% - 5px);
        max-width: unset;
        margin: 5px 0;
    }

    .video-thots-row .author-date {
        display: none;
    }

    .video-thots-row .top-meta {
        position: absolute;
        top: 5px;
        right: 0;
        z-index: 11;
    }

    .thoxt-row-article:hover {
        background-color: unset;
    }

    .separator {
        border-bottom: 4px solid #222;
    }

    .row-cover-rect {
        height: 40vh;
        border-radius: 0;
    }

    .news-row-content .thoxt-row-article-outer {
        margin: 15px 0;
    }

    .news-row-content .thoxt-row-article {
        display: flex;
        flex-wrap: nowrap;
    }

    .thoxt-row-article {
        background-color: transparent;
        padding: 0;
    }

    .row-cover-container {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 50vh;
        margin: 10px 0;
        aspect-ratio: unset;
        background-color: transparent;
        border-radius: 0;
    }

    .row-video-container {
        max-height: 70vh;
        aspect-ratio: 3 / 4;
    }

    .news-row-content .row-cover-container {
        width: 80vw;
        min-width: unset;
        border-radius: 15px;
        margin: 0;
        aspect-ratio: 1 / 1.4;
    }

    .video-thot .row-cover-container {
        aspect-ratio: 3 / 4.5;
        border-radius: 12px;
    }

    .thoxt-row-thot .row-cover-container {
        display: none;
    }

    .thoxt-row:hover .scroll-button-div {
        opacity: 0;
    }

    .thot-meta {
        position: relative;
    }

    .thot-meta .author-date, .thot-meta .thot-body,
    .thot-meta .row-engagement-outer, .thot-meta .reply-count {
        margin: unset;
    }

    .cover-image {
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
        cursor: pointer;
        border-radius: 0;
    }

    /* Sorry i know these are confusing */
    .news-and-desktop, .news-row-content .non-news-mobile, .news-row-content .non-news-mobile-topline {
        display: none;
    }

    .non-news-mobile, .news-row-content .news-and-desktop, .external-stories-mobile {
        display: block;
    }

    .article-desc.truncate-summary {
        display: -webkit-box;
        margin: 0;
    }

    .news-row-content .article-desc.truncate-summary {
        display: none;
    }
    /* End of confusing */

    .article-meta {
        margin-top: 0;
        margin: 5px 10px;
    }

    .news-row-content .article-meta {
        width: 100%;
        margin-bottom: 0;
    }

    .non-news-mobile-topline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .author-name {
        font-size: 1rem;
        color: white;
    }

    .profile-pic {
        width: 32px;
        height: 32px;
    }

    .news-row-content .article-meta {
        font-size: 1rem;
        color: #888;
    }

    .thoxt-row-video {
        border-radius: 0;
    }

    .news-row-content .mute-icon {
        width: 24px;
        height: 24px;
    }

    .video-thot .row-article-video-icon {
        bottom: 18%;
    }

    .video-thot .mute-icon {
        display: none;
    }

    .news-row-content .row-article-video-icon {
        width: 50px;
        height: 50px;
    }

    .options-menu {
        top: 0;
        bottom: auto;
    }

    .row-thot-body {
        padding: 5px;
    }

    .truncate-thot {
        width: 99%;
        padding-bottom: 0;
    }

    .new-article-badge {
        border-radius: 0 0 15px 0;
    }

    .title-image {
        flex-direction: row;
    }

    .article-title {
        min-height: unset;
        margin: 0;
        font-size: 1.17rem;
    }

    .news-row-content .article-title {
        font-size: 1.1rem;
    }

    .story {
        position: absolute;
        width: 100%;
        bottom: 0;
        top: auto;
        padding: 0;
        border-radius: 15px 15px 0 0;
        border-top: 2px solid #555;
        z-index: 200; /* Goes on top of mobile menu */
    }

    #modal-engagement, .story-engagement-outer {
        position: fixed;
    }

    .cluster-details {
        margin-right: 10px;
    }

    .external-story-image {
        width: 100%;
        border-radius: 0;
    }

    .cluster-items-slider {
        overflow-x: auto;
    }

    .primary-genre-div {
        left: 0;
        right: auto;
        border-radius: 0 0 15px 0;
    }

    .external-stories .primary-genre-div {
        border-radius: 15px 0;
    }

    .primary-genre {
        font-size: .8rem;
    }

    .news-load-helpers {
        margin-bottom: 20px;
    }

    .show-more-replies {
        margin: 0;
    }

}