@media screen and (width > 640px) {

    html body {

        *.mobile-only {
            display: none;
        }
    }
}

@media screen and (width <= 1280px) {

    html body {

        *.max-width {
            padding-left: 64px;
            padding-right: 64px;
        }
    }

    section.template-home {

        section.hero {
            margin-top: 0;
            margin-bottom: 200px;
        }

        section.media {
            height: 480px;
        }
    }

    section.page {
        gap: 3rem;
    }

    section.page[data-page="services"] {

        section.services-list {
            gap: 1.75rem;

            > div.flex {
                gap: inherit !important;
            }
        }
    }

    section.page[data-page="news"] {

        section.news {

            section.news-posts {

                ul {
                    gap: 1.75rem;
                }
            }
        }
    }

    footer.master-footer {
        margin-top: 80px;

        section.footer-content {
            padding-bottom: 64px;

            section.footer-links {
                margin-top: 80px;
            }
        }
    }
}

@media screen and (width <= 1180px) {

    section.page {

        aside.page-sidebar {
            width: 360px;
        }
    }

    form.data-grid {

        div.form-field {

            div.tile-select {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }
}

@media screen and (width <= 1024px) {

    html body {

        *.max-width {
            padding-left: 40px;
            padding-right: 40px;
        }
    }

    section.template-home {

        section.hero {
            grid-template-columns: 60% 50%;
            gap: 80px;

            section.hero-description {

            }

            aside.hero-decoration {

                img.hero-decoration-laptop {
                    right: unset;
                    left: -175px;
                }
            }
        }

        section.services {
            margin-top: -80px;

            ul {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        section.media {

            aside.canvas {
                width: 75%;
                justify-self: center;
            }
        }
    }

    section.page {

        aside.page-sidebar {
            width: 300px;

            form.email-subscription {

                input {
                    min-width: 0;
                }
            }
        }
    }

    section.page[data-page="services"] {

        section.services-list {

            > div.flex {
                display: grid;

                &:nth-of-type(odd) {
                    grid-template-columns: 60% 37.5%;
                }

                &:nth-of-type(even) {
                    grid-template-columns: 37.5% 60%;
                }

                div.card {
                    width: 100%;
                    box-sizing: border-box;

                    div.service-decoration {

                        i {
                            font-size: 18rem;
                        }
                    }
                }
            }
        }
    }

    footer.master-footer {
        margin-top: 40px;

        section.footer-content {
            padding-bottom: 40px;

            section.footer-links {
                margin-top: 40px;
            }
        }
    }
}

@media screen and (width <= 960px) {

    section.template-home {

        section.hero {
            grid-template-columns: 68% 53%;
        }
    }

    form.data-grid {

        [data-field] {
            grid-column: span 2;
        }
    }
}

@media screen and (width <= 900px) {

    html body {

        *.max-width {
            box-sizing: border-box;
        }
    }

    section.page {
        flex-direction: column;

        article.page-content {
            width: 100%;
        }

        aside.page-sidebar {
            width: 100%;

            div.offset-heading {
                height: 0;
            }
        }
    }

    section.template-home {

        section.hero {
            height: auto;
            min-height: 0;
            grid-template-columns: 1fr;
            margin-top: 64px;

            section.hero-description {
                padding-right: 200px;
            }

            aside.hero-decoration {
                align-items: end;
                height: 0;

                img.hero-decoration-laptop {
                    width: 320px;
                    left: unset;
                    right: 20px;
                }

                pre {
                    transform: translateX(50%);
                    opacity: 0.5;
                }
            }
        }

        section.news {

            section.news-posts {

                ul {
                    grid-template-columns: 1fr;

                    li {

                        div.card {

                            &::before {
                                transform: rotate(-1deg);
                            }

                            &::after {
                                transform: rotate(1deg);
                            }
                        }
                    }
                }
            }
        }
    }

    section.page[data-page="services"] {

        section.services-list {

            > div.flex {

                div.card {

                    div.service-decoration {

                        i {
                            font-size: 15rem;
                        }
                    }
                }
            }
        }
    }

    section.page[data-page="news"] {

        section.news {

            section.news-posts {

                &.size-large {

                    ul {

                        li {
                            grid-column: span 10;

                            div.card {

                                &::before {
                                    transform: rotate(-1deg);
                                }

                                &::after {
                                    transform: rotate(1deg);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (width <= 768px) {

    div.card {

        div.card-content {
            padding: 14px 20px;
        }
    }

    header.master-header {

        > div.flex {
            padding-right: 20px;

            > a.button {
                display: none;
            }
        }
    }

    section.template-home {

        section.hero {
            margin-bottom: 100px;

            section.hero-description {
                padding-right: 0;
                align-items: center;
                text-align: center;

                a.button {
                    align-self: unset;
                }
            }

            aside.hero-decoration {

                img.hero-decoration-laptop {
                    display: none;
                }

                pre {
                    transform: translateX(33%);
                }
            }
        }

        section.services {
            align-items: center;

            h2 {
                justify-content: center;
            }

            section.services-description {
                align-items: center;
                flex-direction: column;
                gap: 2rem;
                text-align: center;
            }
        }

        section.media {
            display: flex;
            flex-direction: column-reverse;
            height: unset;
            max-height: unset;
            min-height: unset;
            margin-top: 60px;

            aside.canvas {
                flex-shrink: 0;
                width: 100%;
                height: 480px;
                margin: -120px 0 -40px;
            }

            section.description {
                text-align: center;

                h2 {
                    justify-content: center;
                }

                section.description-content {

                    p {
                        max-width: unset;
                    }
                }
            }
        }

        section.news {

            header {

                h2 {
                    justify-content: center;
                }

                section.news-description {
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 2rem;

                    p {
                        max-width: unset;
                    }
                }
            }
        }
    }

    section.page[data-page="services"] {

        section.services-list {

            > div.flex {

                div.card {

                    div.service-decoration {

                        i {
                            font-size: 10rem;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (width <= 640px) {

    header.master-header {

        nav:not(.mobile-only) {
            display: none;
        }
    }

    section.template-home {

        section.hero {
            grid-template-columns: 100%;
        }

        section.services {

            h2 {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;

                i {
                    line-height: unset;
                    transform: translateY(-0.25em);
                }
            }

            ul {
                grid-template-columns: 1fr;
            }
        }

        section.media {

            section.description {

                h2 {
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;

                    i {
                        line-height: unset;
                        transform: translateY(-0.25em);
                    }
                }
            }
        }

        section.news {

            header {

                h2 {
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;

                    i {
                        line-height: unset;
                        transform: translateY(-0.25em);
                    }
                }
            }
        }
    }

    section.page[data-page="services"] {

        section.services-list {

            > div.flex {
                display: flex;

                &:nth-of-type(odd) {
                    flex-direction: column-reverse;
                }

                &:nth-of-type(even) {
                    flex-direction: column;
                }

                & div.card {

                    div.service-decoration {

                        i {
                            font-size: 15rem;
                        }
                    }
                }
            }
        }
    }

    section.page {

        article.page-content {

            div.page-content-text {

                &::before {
                    transform: rotate(-0.5deg);
                }

                &::after {
                    transform: rotate(0.5deg);
                }

                &.tall {

                    &::before {
                        transform: rotate(-0.25deg);
                    }

                    &::after {
                        transform: rotate(0.25deg);
                    }
                }
            }

            h1 {
                text-align: center;
            }

            section.author {
                justify-content: center;

                div.details {
                    flex-grow: unset;
                }
            }

            h2 {

                &:has(i) {
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;

                    i {
                        line-height: unset;
                        transform: translateY(-0.25em);
                    }
                }
            }

            p.page-description {
                text-align: center;
            }
        }
    }

    footer.master-footer {
        text-align: center;

        section.footer-content {

            section.footer-links {
                display: grid;
                grid-template-columns: 1.25fr 0.75fr;
                row-gap: 40px;

                ul.brand {
                    grid-row: span 3;

                    a.logo {
                        margin-top: -12px;
                    }
                }

                ul {
                    align-items: center;
                }
            }
        }
    }
}

@media screen and (width <= 480px) {

    form.data-grid {

        div.form-field {

            div.tile-select {
                grid-template-columns: 1fr;
            }
        }
    }

    section.template-home {

        section.hero {

            aside.hero-decoration {
                justify-content: center;

                pre {
                    transform: translateY(-1.5rem);
                    opacity: 0.33;
                }
            }
        }
    }

    section.page {

        article.page-content {

            section.author {

                div.details {

                    span.writer {
                        flex-grow: unset;
                    }

                    span.meta {
                        display: none;
                    }
                }
            }
        }
    }

    footer.master-footer {
        text-align: left;

        section.footer-content {

            section.footer-links {
                grid-template-columns: auto;
                gap: 40px;

                ul.brand {
                    grid-column: 2;
                    grid-row: 2;

                    li:has(cite) {
                        display: none;
                    }
                }

                ul {
                    align-items: center;
                }
            }
        }
    }
}

@media screen and (width <= 420px) {

    html body {

        *.max-width {
            padding-left: 1.75rem;
            padding-right: 1.75rem;
        }
    }

    div.card {

        &.horizontal {
            padding: 1rem;
        }

        div.card-content {
            padding: 6px 10px;
        }

        div.service-decoration {
            opacity: 0.5;

            i {
                font-size: 10rem !important;
            }
        }
    }
}

@media screen and (width <= 402px) {

    section.template-home {

        section.hero {

            aside.hero-decoration {

                pre {
                    transform: translateY(-4rem);
                }
            }
        }
    }
}