section.template-home,
section.template-news {
    
    section.hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: calc(100dvh - 200px);
        min-height: 636px;
        max-height: 752px;
        margin-top: 20px;
        margin-bottom: 120px;
        gap: 4.5rem;

        section.hero-description {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 1rem;
            position: relative;
            z-index: 1;

            h1 {
                font-size: 3.25rem;
                margin: 0;
                font-family: var(--fyr-font-heading);
                line-height: 1.2em;

                strong {
                    color: var(--fyr-color-secondary);
                    font-size: 1.5em;
                    font-family: var(--fyr-font-special);
                    font-variation-settings: var(--fyr-font-special-variation-black);
                }
            }

            p {
                max-width: 80%;
                margin: 0 0 1rem;
                line-height: 1.75rem;
                font-size: 1.25rem;
                color: var(--fyr-color-neutral);
            }

            a.button {
                align-self: start;
                display: inline-flex;
                align-items: center;
                padding: 14px 24px 14px 30px;
                gap: 12px;
                color: var(--fyr-color-white);
                background: var(--fyr-color-primary);
                border: none;
                border-radius: 100px;
                text-decoration: none;
                font-size: 1.2rem;

                span {
                    font-family: var(--fyr-font-heading);
                    font-weight: bold;
                }

                i {
                    font-size: 1.66rem;
                    line-height: 0;
                }
            }
        }

        aside.hero-decoration {
            display: flex;
            justify-content: end;
            align-items: center;
            position: relative;
            height: 714px;

            pre {
                position: relative;

                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    inset: 0;
                    border-radius: inherit;
                    box-shadow: 0 0 100px var(--fyr-color-primary);
                    opacity: 0.05;
                }

                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    inset: 0;
                    border-radius: inherit;
                    background: linear-gradient(to bottom, transparent 0%, var(--fyr-color-black) 88%);
                    opacity: 0.44;
                }

                &[data-variant="intellisense"] {
                    position: absolute;
                    right: 160px;
                    bottom: 20px;

                    &::before {
                        opacity: 0.1;
                    }
                }
            }

            img.hero-decoration-laptop {
                width: 480px;
                position: absolute;
                right: 239px;
                bottom: -23px;
                filter: drop-shadow(0 0 100px var(--fyr-color-primary-glow));
            }
        }
    }

    section.services {

        h2 {
            display: flex;
            align-items: center;
            gap: 0.125em;
            margin: 0 0 0.66rem;
            font-family: var(--fyr-font-heading);
            font-size: 2.75rem;
            line-height: 1.25em;

            i {
                /*width: 1em;*/
                color: var(--fyr-color-secondary);
                font-size: 1.25em;
                line-height: 0;
                transform: translateX(-0.15em) translateY(-0.15em);
            }

            span {
                transform: translateY(-0.5rem);
            }
        }

        section.services-description {
            margin-bottom: 2.5rem;

            p {
                max-width: 480px;
                margin: 0;
                line-height: 1.75rem;
                font-size: 1.25rem;
                color: var(--fyr-color-neutral);
            }

            a {
                display: flex;
                align-items: center;
                gap: 0.66rem;
                padding: 0.5em 1.22em;
                color: var(--fyr-color-white);
                background: var(--fyr-color-primary);
                border-radius: 100px;
                text-decoration: none;
                font-size: 1rem;
                font-weight: bold;

                i {
                    line-height: 0;
                    font-size: 1.1em;
                }
            }
        }

        ul {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 1.75rem;

            li {
                display: flex;
            }
        }
    }

    section.media {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 600px;
        /*height: calc(100vh - 200px);*/
        /*min-height: 636px;*/
        /*max-height: 790px;*/
        /*margin-top: 32px;*/
        /*margin-bottom: 32px;*/
        /*gap: 4rem;*/
        position: relative;

        &::before {
            content: '';
            display: block;
            position: absolute;
            inset: -100px 0;
            z-index: -1;
            background-image: radial-gradient(ellipse farthest-side, var(--fyr-color-primary), transparent);
            opacity: 0.15;
        }

        aside.canvas {

            canvas {
                mix-blend-mode: lighten;
                mix-blend-mode: plus-lighter;
            }
        }

        section.description {
            display: flex;
            flex-direction: column;
            justify-content: center;

            h2 {
                display: flex;
                align-items: center;
                gap: 0.125em;
                margin: 2rem 0 0.8rem;
                font-family: var(--fyr-font-heading);
                font-size: 2.75rem;
                line-height: 1.25em;

                i {
                    /*width: 1em;*/
                    color: var(--fyr-color-secondary);
                    font-size: 1.25em;
                    line-height: 0;
                    transform: translateX(-0.15em) translateY(-0.15em);
                }

                span {
                    transform: translateY(-0.5rem);
                }
            }

            section.description-content {
                margin-bottom: 3.33rem;

                p {
                    max-width: 480px;
                    margin: 0 0 2rem;
                    line-height: 1.75rem;
                    font-size: 1.25rem;
                    color: var(--fyr-color-neutral);
                }

                a {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.66rem;
                    padding: 0.5em 1.22em;
                    color: var(--fyr-color-white);
                    background: var(--fyr-color-primary);
                    border-radius: 100px;
                    text-decoration: none;
                    font-size: 1rem;
                    font-weight: bold;

                    i {
                        line-height: 0;
                        font-size: 1.1rem;
                    }
                }
            }
        }
    }

    section.news {

        header {
            display: flex;
            flex-direction: column;

            h2 {
                display: flex;
                align-items: center;
                gap: 0.125em;
                margin: 2rem 0 0.8rem;
                font-family: var(--fyr-font-heading);
                font-size: 2.75rem;
                line-height: 1.25em;

                i {
                    /*width: 1em;*/
                    color: var(--fyr-color-secondary);
                    font-size: 1.25em;
                    line-height: 0;
                    transform: translateX(-0.15em) translateY(-0.15em);
                }

                span {
                    transform: translateY(-0.5rem);
                }
            }

            section.news-description {
                margin-bottom: 2.5rem;

                p {
                    max-width: 480px;
                    margin: 0;
                    line-height: 1.75rem;
                    font-size: 1.25rem;
                    color: var(--fyr-color-neutral);
                }

                a {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.66rem;
                    padding: 0.5em 1.22em;
                    color: var(--fyr-color-white);
                    background: var(--fyr-color-primary);
                    border-radius: 100px;
                    text-decoration: none;
                    font-size: 1rem;
                    font-weight: bold;

                    i {
                        line-height: 0;
                        font-size: 1.1rem;
                    }
                }
            }
        }

        section.news-posts {

            &.size-large {

                ul {
                    gap: 64px;
                    grid-template-columns: repeat(10, 1fr);

                    li {
                        grid-column: span 6;

                        &:not(.size-large) {
                            grid-column: span 4;
                        }
                    }
                }
            }

            ul {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                list-style: none;
                margin: 0;
                padding: 0;
                gap: 1.75rem;

                li {
                    display: flex;
                }
            }
        }
    }
}