File: _dev/scss/responsive.scss

@media screen and (min-width: 680px) {
    html {
        body {
            .container {
                width: 80%;
            }

            header {
                &.back-filled {
                    .custom-logo-link {
                        img {
                            width: 40%;
                        }
                    }
                }

                .custom-logo-link {
                    img {
                        width: 50%;
                    }
                }
            }

            .card-player {
                width: 80%;

                .row {
                    gap: 1rem;

                    .column {
                        &:nth-child(1) {
                            width: 12rem;
                            min-height: 12rem;
                        }

                        &:nth-child(2) {
                            width: calc(100% - 12rem);
                            padding: 1rem 1rem 1rem 0;

                            .tags-container {
                                display: flex;
                            }

                            h3 {
                                font-size: 200%;
                            }
                        }
                    }
                }
            }

            #mainNav {
                a {
                    padding: 1rem 0;

                    svg {
                        height: 2rem;
                    }
                }
            }

            .content {
                padding: 2rem;
            }

            .post-list-container {
                display: flex;
                flex-wrap: wrap;
                gap: 3%;

                .post-card {
                    width: 48.5%;

                    .content {
                        padding: 1rem;
                    }
                }
            }

            #pagination {
                padding: 1rem 0;
            }

            .subtitle {
                font-size: 200%;
            }

            .info-board {
                h1 {
                    font-size: 220%;
                }
            }

            section {
                &#highlights {
                    .highlight-container {
                        .items {
                            .highlight-item {
                                width: 30rem;
                                height: 58vh;

                                &:first-child {
                                    margin-left: 5rem;
                                }

                                &:last-child {
                                    margin-right: 5rem;
                                }

                                .content {
                                    padding: 2rem;
                                }
                            }
                        }
                    }
                }

                &#podcast {
                    padding-top: 2rem;
                }
            }

            main {
                &.post {
                    &.about-team {
                        #team {
                            .thumb {
                                height: 24rem;
                            }

                            .container {
                                .team-list {
                                    .team-member {
                                        img {
                                            width: 50%;
                                        }

                                        .links {
                                            a {
                                                svg {
                                                    height: 2rem;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    &.event {
                        .container {
                            .event-details {
                                .event-logo {
                                    height: 6rem;
                                }

                                .event-post-details {
                                    h1 {
                                        font-size: 220%;
                                    }
                                }
                            }
                        }
                    }

                    .container {
                        .content {
                            h1 {
                                font-size: 220%;
                            }
                        }
                    }
                }

                &#rpg {
                    .banner {
                        .decoration {
                            &.top {
                                height: 5rem;
                            }

                            &.bottom {
                                background-position: 100% top;
                                height: 7rem;
                            }
                        }

                        img {
                            width: 85%;
                        }
                    }

                    .logo-container {
                        .container {
                            width: 80%;
                        }
                    }
                }
            }

            footer {
                .container {
                    .menu {
                        flex-direction: row;
                        flex-wrap: wrap;
                        align-items: flex-start;

                        li {
                            width: 50%;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1024px) {
    html {
        body {
            background: linear-gradient(to bottom, #000, var(--darkGrey) 2%);

            .container {
                width: 80%;
            }

            header {
                &.back-filled {
                    position: sticky;
                    top: 0;
                    left: 0;
                    z-index: 998;

                    .custom-logo-link {
                        img {
                            width: 20%;
                        }
                    }
                }

                &.orange {
                    position: relative;
                }

                .custom-logo-link {
                    img {
                        width: 20%;
                    }
                }
            }

            #mainNav {
                width: auto;
                height: 70vh;
                left: 0;
                top: 15vh;
                flex-direction: column;
                border-top-left-radius: 0;
                border-bottom-right-radius: .5rem;
                box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);

                a {
                    padding: 0 .5rem;

                    &:hover {
                        svg {
                            fill: var(--pink);
                        }
                    }

                    svg {
                        height: 1.5rem;
                        transition: ease-in-out .3s;
                    }
                }
            }

            .post-list-container {
                gap: 2%;

                .post-card {
                    width: 32%;
                    transition: ease-in-out .3s;

                    &:hover {
                        transform: scale(1.05);
                    }
                }
            }

            #pagination {
                a {
                    transition: ease-in-out .3s;

                    &:hover {
                        background-color: var(--pink);
                    }
                }
            }

            section {
                &#highlights {
                    .title {
                        display: flex;
                        gap: 2rem;

                        .highlight-controllers {
                            display: block;
                            padding-top: .5rem;
                            display: flex;
                            gap: 1rem;

                            button {
                                height: max-content;
                                background-color: transparent;
                                border: none;
                                display: grid;
                                place-items: center;
                                cursor: pointer;

                                &:hover {
                                    svg {
                                        fill: var(--pink);
                                    }
                                }

                                svg {
                                    width: 1.5rem;
                                    height: 1.5rem;
                                    fill: var(--orange);
                                    transition: ease-in-out .3s;
                                }
                            }
                        }
                    }

                    .highlight-container {
                        &.block-pointer-events {
                            a {
                                pointer-events: none;
                            }
                        }

                        .items {
                            .highlight-item {
                                width: 20rem;
                                height: 60vh;
                                transition: ease-in-out 0.3s;

                                &:hover {
                                    .overlay {
                                        opacity: 1;
                                    }

                                    .content {
                                        hr {
                                            width: 5rem;
                                        }
                                    }
                                }

                                &:first-child {
                                    margin-left: 8rem;
                                }

                                &:last-child {
                                    margin-right: 8rem;
                                }

                                .content {
                                    padding: 2rem;
                                }
                            }
                        }
                    }
                }

                &.highlight-event {
                    .container {
                        a.event-container {
                            padding: 5em 0;
                            background-size: 100% auto;

                            &:hover {
                                background-color: rgba(0, 0, 0, 0.65);
                                background-size: 110% auto;
                            }
                        }
                    }
                }

                &#podcast {
                    padding-top: 2rem;

                    .container {
                        .selector {
                            max-width: 50%;
                        }

                        .podcast-items {
                            display: grid;
                            grid-template-columns: repeat(4, 1fr);
                            grid-template-rows: auto;
                            grid-auto-rows: 1fr;
                            grid-auto-flow: row;
                            justify-content: unset;
                            gap: unset;
                            grid-gap: 1rem;

                            .podcast-item {
                                width: 100%;
                                height: min-content;
                                transition: ease-in-out .3s;
                                margin-bottom: 0;

                                &:first-child {
                                    width: auto;
                                    height: min-content;
                                    grid-area: 1 / 1 / 6 / 3;
                                }

                                &:not(:first-child) {
                                    &:hover {
                                        transform: scale(1.05);
                                    }
                                }
                            }
                        }

                        .pagination-container {
                            margin-top: 3rem;
                        }
                    }
                }

                &#videos {
                    .container {
                        .sb_youtube {
                            .sby_items_wrap {
                                gap: 2% !important;

                                .sby_item {
                                    width: 32% !important;
                                }
                            }
                        }
                    }
                }

                &#podcast_category_highlight {
                    .container {
                        padding: 2rem;

                        .podcast-items {
                            gap: 0;
                            justify-content: space-between;

                            .podcast-item {
                                width: 19%;
                                transition: ease-in-out .3s;

                                &:hover {
                                    transform: scale(1.05);
                                }
                            }
                        }
                    }
                }
            }

            main {
                min-height: 60vh;

                &.post,
                .page-content {
                    background-color: var(--darkGrey);
                    padding: 2rem 0;

                    &.about-team {
                        #team {
                            .team-title {
                                background-color: transparent;

                                .container {
                                    background-color: transparent;

                                    .subtitle {
                                        color: var(--white);
                                    }
                                }
                            }

                            .thumb {
                                height: 35rem;
                            }

                            .team-container {
                                width: 80%;
                                background-color: transparent;

                                .team-list {
                                    gap: 2%;

                                    .team-member {
                                        width: 32%;
                                        margin-bottom: 2rem;

                                        p {
                                            width: 70%;
                                        }

                                        .links {
                                            a {
                                                svg {
                                                    height: 1.5rem;
                                                    transition: ease-in-out .3s;

                                                    &:hover {
                                                        fill: var(--pink);
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

                                .subtitle.center {
                                    font-size: 150%;
                                }
                            }
                        }
                    }

                    &.event {
                        background-size: 100% auto;

                        .container {
                            background-color: transparent;

                            .content {
                                padding: 2rem;

                                .podcast-items {
                                    .podcast-item {
                                        &:first-child {
                                            width: 48.5%;
                                        }
                                    }
                                }

                                .instagram-posts {
                                    display: flex;
                                    flex-wrap: wrap;
                                    justify-content: space-between;

                                    iframe {
                                        width: 48.5% !important;
                                    }
                                }
                            }
                        }
                    }

                    &.review {
                        .container {
                            margin-left: 12.5%;

                            .info-board {
                                position: absolute;
                                right: -50%;
                                width: 45%;
                                top: 0;
                                background-color: #000;
                            }
                        }
                    }

                    &.page {
                        .container {
                            background-color: transparent;

                            .content {
                                color: var(--white);
                            }
                        }
                    }

                    .container {
                        background-color: var(--white);
                        width: 50%;
                        padding: 2rem;
                        border-radius: .5rem;
                        position: relative;

                        .content {
                            .splide {
                                .wp-block-image {
                                    max-height: 30rem;
                                }
                            }
                        }
                    }
                }

                &#rpg {
                    .banner {
                        min-height: 85vh;

                        .decoration {
                            &.top {
                                height: 7.5rem;
                            }

                            &.bottom {
                                height: 8rem;
                            }
                        }

                        img {
                            width: 70%;
                        }
                    }

                    .logo-container {
                        padding-top: 2rem;
                    }

                    .post-list {
                        .podcast-items {
                            gap: 1.333%;

                            .podcast-item {
                                width: 24%;
                                transition: ease-in-out .3s;

                                &:first-child {
                                    width: 24%;
                                }

                                &:hover {
                                    transform: scale(1.05);
                                }
                            }
                        }
                    }

                    .page-content {
                        background-color: #000;

                        .container {
                            width: 50%;
                            margin: 0;
                            margin-left: 10%;
                            background-color: transparent;
                            padding: 0;

                            .content {
                                color: var(--white);

                                .subtitle {
                                    color: var(--white) !important;
                                }

                                p,
                                li {
                                    color: var(--white);
                                }
                            }
                        }
                    }
                }
            }

            #image_show {
                img {
                    height: 80%;
                    width: auto;
                    max-height: unset;
                }
            }

            footer {
                padding: 2rem 0;

                .container {
                    .menu {
                        flex-direction: row;
                        flex-wrap: nowrap;
                        align-items: flex-start;
                        justify-content: space-between;

                        li {
                            .sub-menu {
                                li {
                                    a {
                                        &:hover {
                                            text-decoration: underline;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1281px) {
    html {
        body {
            section {
                &#highlights {
                    .highlight-container {
                        .items {
                            .highlight-item {
                                &:first-child {
                                    margin-left: 8.5rem;
                                }

                                &:last-child {
                                    margin-right: 8.5rem;
                                }
                            }
                        }
                    }
                }
            }

            main {
                &.post {
                    &.about-team {
                        #team {
                            .thumb {
                                height: 40rem;
                            }
                        }
                    }
                }

                &#rpg {
                    .banner {
                        min-height: 90vh;

                        img {
                            width: 60%;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1600px) {
    html {
        body {
            .card-player {
                width: 70%;
            }

            .container {
                width: 70%;
            }

            #mainNav {
                height: 60vh;
                top: 20vh;

                a {
                    padding: 0 .5rem;

                    svg {
                        height: 1.5rem;
                    }
                }
            }

            section {
                &#highlights {
                    .highlight-container {
                        .items {
                            .highlight-item {
                                height: 50vh;

                                &:first-child {
                                    margin-left: 15.5rem;
                                }

                                &:last-child {
                                    margin-right: 15.5rem;
                                }
                            }
                        }
                    }
                }

                &.highlight-event {
                    .container {
                        a.event-container {
                            h2 {
                                font-size: 200%;
                            }

                            p.description {
                                font-size: 100%;
                            }
                        }
                    }
                }
            }

            main {
                &.post {
                    &.about-team {
                        #team {
                            .thumb {
                                height: 48rem;
                            }

                            .team-container {
                                width: 70%;
                            }
                        }
                    }
                }

                &#rpg {
                    .banner {
                        .decoration {
                            &.top {
                                height: 9rem;
                            }

                            &.bottom {
                                height: 10rem;
                            }
                        }
                    }

                    .page-content {
                        .container {
                            margin-left: 15%;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1890px) {
    html {
        body {
            .card-player {
                width: 60%;
            }

            .container {
                width: 60%;
            }

            header {
                &.back-filled {
                    .custom-logo-link {
                        img {
                            width: 15%;
                        }
                    }
                }

                .custom-logo-link {
                    img {
                        width: 15%;
                    }
                }
            }

            section {
                &#highlights {
                    .highlight-container {
                        .items {
                            .highlight-item {
                                &:first-child {
                                    margin-left: 24rem;
                                }

                                &:last-child {
                                    margin-right: 24rem;
                                }
                            }
                        }
                    }
                }
            }

            main {
                &.post {
                    &.about-team {
                        #team {
                            .thumb {
                                height: 55rem;
                            }

                            .team-container {
                                width: 60%;
                            }
                        }
                    }

                    &.review {
                        .container {
                            margin-left: 20%;
                        }
                    }

                    .container {
                        width: 40%;
                    }
                }

                &#rpg {
                    .banner {
                        .decoration {
                            &.top {
                                height: 10.5rem;
                            }

                            &.bottom {
                                height: 11.5rem;
                            }
                        }

                        img {
                            width: 50%;
                        }
                    }

                    .page-content {
                        .container {
                            width: 40%;
                            margin-left: 20%;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 2500px) {
    html {
        body {
            .card-player {
                width: 50%;
            }

            .container {
                width: 50%;
            }

            #mainNav {
                a {
                    padding: 0 1rem;
                }
            }

            header {
                &.back-filled {
                    .custom-logo-link {
                        img {
                            width: 10%;
                        }
                    }
                }

                .custom-logo-link {
                    img {
                        width: 10%;
                    }
                }
            }

            section {
                &#highlights {
                    .highlight-container {
                        .items {
                            .highlight-item {
                                width: 28rem;
                                height: 60vh;

                                &:first-child {
                                    margin-left: 40rem;
                                }

                                &:last-child {
                                    margin-right: 32rem;
                                }
                            }
                        }
                    }
                }
            }

            main {
                &.post {
                    &.about-team {
                        #team {
                            .thumb {
                                height: 75rem;
                            }

                            .team-container {
                                width: 50%;
                            }
                        }
                    }

                    .container {
                        width: 40%;
                    }
                }

                &#rpg {
                    .banner {
                        min-height: 100vh;

                        .decoration {
                            &.top {
                                height: 14rem;
                            }

                            &.bottom {
                                height: 15.5rem;
                            }
                        }

                        img {
                            width: 50%;
                        }
                    }

                    .page-content {
                        .container {
                            width: 35%;
                            margin-left: 25%;
                        }
                    }
                }
            }
        }
    }
}