@media only screen and ((max-width: 1000px) or (orientation: portrait)) {
    
    /* ----------------- Page and Content ----------------- */

    .main, .page-content {
        width: 100%;
    }

    .page {
        background: var(--gradient-blue);
        width: calc(100% - (2 * var(--page-offset)));
        min-height: calc(100vh - (2 * var(--page-offset)));
        height: auto;
        max-height: fit-content;
        margin: var(--page-offset);
        overflow: hidden;
    }

    .page.infinite {
        height: auto;
    }


    /* ----------------- Buttons ----------------- */

    .button {
        padding: 1.5rem 3.2rem 1.5rem 3.2rem;
        width: max-content;
        color: var(--clr-white);
        font-size: 2.0rem;
        line-height: 2.0rem;
        border-radius: 6.3rem;
        border: solid 0.2rem var(--clr-white);
    }

    .button.arrow {
        padding: 1.5rem 5.6rem 1.5rem 3.2rem;
        font-size: 2.0rem;
        line-height: 2.0rem;
        letter-spacing: 0.02rem;
        background-color: var(--clr-white-transparent);
        background-size: 1.0rem 1.6rem;
        background-position: center right 2.6rem;
    }

    .button.arrow.right {
        background-image: url("../images/icons/arrow-right-white.svg");
    }

    .button.arrow.down {
        background-image: url("../images/icons/arrow-down-white.svg");
        background-size: 1.6rem 1.0rem;
        background-position: center right 2.2rem;
    }


    /* ----------------- Post ----------------- */

    .post {
        position: relative;
        top: 0;
        left: 0;
        transform: translateY(0);
        margin: 0rem;
        padding: 8.6rem 6rem 6rem 6rem;
        width: 100%;
        max-height: max-content;
        overflow: hidden;
        overflow-y: hidden;
        direction: inherit;
    }

    .page.infinite .post {
        position: relative;
    }

    .post > * {
        direction: inherit;
    }

    .post .body {
        margin-bottom: 4rem;
        font-size: 2.0rem;
        line-height: 2.6rem;
    }

    .post .section {
        margin-bottom: 4rem;
    }

    .post .h1 {
        margin-bottom: 5rem;
        font-size: 6.0rem;
        line-height: 6.8rem;
    }

    .post .h2,
    .post h1,
    .post h2,
    .post h3 {
        margin: 4rem 0 1.8rem 0;
        font-size: 2.4rem;
        line-height: 3.3rem;
    }

    .post .paragraph,
    .post p {
        margin-top: 0;
        margin-bottom: 3.2rem;
    }

    .post > a {
        width: 100%;
        margin: auto;
        float: center;
    }


    .imabeBbackground {
        display: none;
    }

    .imabeBbackground.classic {
        background-size: 64%;
        background-position: bottom center;
        background-image: url("../images/backgrounds/type-image-classic.svg");
    }

    .imabeBbackground.juicy {
        background-position: top 29rem left 4rem;
        background-image: url("../images/backgrounds/type-image-juicy.svg");
    }

    .page .imageGlassContainer {
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 0;
        right: 28.6rem; 
        height: 83.0rem;
        width: 33.0rem;
        overflow: hidden;
    }

    .page img.imageGlass {
        display: none;
    }


    .centerConteiner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


    /* ----------------- Simple Carousel ----------------- */

    .simpleCarousel,
    .simpleMultiItemCarousel,
    .carousel {
        position: relative;
        width: 100%;
        z-index: 40;
    }

    .simpleCarousel .slider,
    .simpleMultiItemCarousel .slider,
    .carousel .slider {
        display: flex;
        align-items: center;
        width: 100%;
        height: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .simpleCarousel .slider::-webkit-scrollbar,
    .simpleMultiItemCarousel .slider::-webkit-scrollbar,
    .carousel .slider::-webkit-scrollbar {
        display:none;
    }

    .simpleCarousel .item,
    .simpleMultiItemCarousel .item,
    .carousel .item {
        position: relative;
        display: inline-block;
        width: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .simpleCarousel .itemInner,
    .simpleMultiItemCarousel .itemInner,
    .carousel .itemInner {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        padding: 0rem 0rem;
    }

    .simpleCarousel .arrow,
    .simpleMultiItemCarousel .arrow,
    .carousel .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 4.6rem;
        height: 4.6rem;
        cursor: pointer;
    }

    .simpleCarousel .arrow.left,
    .simpleMultiItemCarousel .arrow.left,
    .carousel .arrow.left {
        left: 3.6rem;
        background-image: url("../images/icons/arrow-left-white.svg");
    }

    .simpleCarousel .arrow.right,
    .simpleMultiItemCarousel .arrow.right,
    .carousel .arrow.right {
        right: 3.6rem;
        background-image: url("../images/icons/arrow-right-white.svg");
    }

}


/* ----------------- Mobile 360px ----------------- */
@media only screen and (max-width: 500px) {
    
    /* ----------------- Page and Content ----------------- */

    .main, .page-content {
        width: 100%;
    }

    .page {
        background: var(--gradient-blue);
        width: calc(100% - (2 * var(--page-offset)));
        min-height: calc(100vh - (2 * var(--page-offset)));
        height: auto;
        max-height: fit-content;
        margin: var(--page-offset);
        overflow: hidden;
    }

    .page.infinite {
        height: auto;
    }


    /* ----------------- Buttons ----------------- */

    .button {
        padding: 1.3rem 3.0rem 1.3rem 3.0rem;
        width: max-content;
        color: var(--clr-white);
        font-size: 1.8rem;
        line-height: 1.8rem;
        border-radius: 6.3rem;
        border: solid 0.2rem var(--clr-white);
    }

    .button.arrow {
        padding: 1.3rem 5.4rem 1.3rem 3.0rem;
        font-size: 1.8rem;
        line-height: 1.8rem;
        letter-spacing: 0.02rem;
        background-color: var(--clr-white-transparent);
        background-size: 1.0rem 1.6rem;
        background-position: center right 2.6rem;
    }

    .button.arrow.right {
        background-image: url("../images/icons/arrow-right-white.svg");
    }

    .button.arrow.down {
        background-image: url("../images/icons/arrow-down-white.svg");
        background-size: 1.6rem 1.0rem;
        background-position: center right 2.2rem;
    }


    /* ----------------- Post ----------------- */

    .post {
        position: relative;
        top: 0;
        left: 0;
        transform: translateY(0);
        margin: 0rem;
        padding: 7.6rem 4rem 4rem 4rem;
        width: 100%;
        max-height: max-content;
        overflow: hidden;
        overflow-y: hidden;
        direction: inherit;
    }

    .page.infinite .post {
        position: relative;
    }

    .post > * {
        direction: inherit;
    }

    .post .body {
        margin-bottom: 4rem;
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    .post .section {
        margin-bottom: 4rem;
    }

    .post .h1 {
        margin-bottom: 4rem;
        font-size: 4.2rem;
        line-height: 5.0rem;
    }

    .post .h2,
    .post h1,
    .post h2,
    .post h3 {
        margin: 4rem 0 1.8rem 0;
        font-size: 2.4rem;
        line-height: 3.3rem;
    }

    .post .paragraph,
    .post p {
        margin-top: 0;
        margin-bottom: 1.8rem;
    }

    .post > a {
        width: 100%;
        margin: auto;
        float: center;
    }


    .imabeBbackground {
        display: none;
    }

    .imabeBbackground.classic {
        background-size: 64%;
        background-position: bottom center;
        background-image: url("../images/backgrounds/type-image-classic.svg");
    }

    .imabeBbackground.juicy {
        background-position: top 29rem left 4rem;
        background-image: url("../images/backgrounds/type-image-juicy.svg");
    }

    .page .imageGlassContainer {
        display: flex;
        justify-content: center;
        position: absolute;
        bottom: 0;
        right: 28.6rem; 
        height: 83.0rem;
        width: 33.0rem;
        overflow: hidden;
    }

    .page img.imageGlass {
        display: none;
    }


    .centerConteiner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


    /* ----------------- Simple Carousel ----------------- */

    .simpleCarousel,
    .simpleMultiItemCarousel,
    .carousel {
        position: relative;
        width: 100%;
        z-index: 40;
    }

    .simpleCarousel .slider,
    .simpleMultiItemCarousel .slider,
    .carousel .slider {
        display: flex;
        align-items: center;
        width: 100%;
        height: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .simpleCarousel .slider::-webkit-scrollbar,
    .simpleMultiItemCarousel .slider::-webkit-scrollbar,
    .carousel .slider::-webkit-scrollbar {
        display:none;
    }

    .simpleCarousel .item,
    .simpleMultiItemCarousel .item,
    .carousel .item {
        position: relative;
        display: inline-block;
        width: 100%;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .simpleCarousel .itemInner,
    .simpleMultiItemCarousel .itemInner,
    .carousel .itemInner {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        padding: 0rem 0rem;
    }

    .simpleCarousel .arrow,
    .simpleMultiItemCarousel .arrow,
    .carousel .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 3.8rem;
        height: 3.8rem;
        cursor: pointer;
    }

    .simpleCarousel .arrow.left,
    .simpleMultiItemCarousel .arrow.left,
    .carousel .arrow.left {
        left: 1.7rem;
        background-image: url("../images/icons/arrow-left-white.svg");
    }

    .simpleCarousel .arrow.right,
    .simpleMultiItemCarousel .arrow.right,
    .carousel .arrow.right {
        right: 1.7rem;
        background-image: url("../images/icons/arrow-right-white.svg");
    }

}