div.card {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.66rem;
    padding: 1.25rem;
    border-radius: 1rem;
    position: relative;

    &.horizontal {
        flex-direction: row;
        gap: 2rem;
        padding: 1.5rem;

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

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

        div.card-image {
            width: 40%;
        }

        div.card-icon {

        }
    }

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

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

    div.card-background {
        position: absolute;
        inset: 20px;
        z-index: -1;
        border-radius: inherit;
        background-size: cover;
        background-position: center;
        filter: blur(20px) opacity(0.4);
        mix-blend-mode: soft-light;
    }

    div.card-content {
        padding: 28px 40px 28px 40px;

        h3 {
            margin-top: 1rem !important;
        }

        p {
            margin: 1rem 0;
        }
    }

    div.card-image {
        display: flex;
        flex-shrink: 0;
        width: 100%;

        &[data-object-position='left'] img {
            object-position: 10%;
        }

        &[data-object-position='25%'] img {
            object-position: 25%;
        }

        &[data-object-position='33%'] img {
            object-position: 33%;
        }

        &[data-object-position='75%'] img {
            object-position: 75%;
        }

        &[data-object-position='right'] img {
            object-position: right;
        }

        &.full-size {
            width: 100%;
            height: 100%;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0.66rem;
            mix-blend-mode: lighten;
            opacity: 0.66;
        }
    }

    &::before {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: var(--fyr-color-neutral-3d-red);
        transform: rotate(-2deg);
        opacity: 0.05;
    }

    &::after {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: var(--fyr-color-neutral-3d-blue);
        transform: rotate(2deg);
        opacity: 0.05;
    }

    div.card-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 56px;
        height: 56px;
        border-radius: 0.66rem;
        position: relative;

        &::before {
            content: '';
            display: block;
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: var(--fyr-color-neutral);
            opacity: 0.066;
        }

        i {
            font-size: 1.66rem;
            line-height: 0;
            position: relative;
            top: 1px;
            color: var(--fyr-color-secondary);
        }

        & + h3 {
            margin-top: 0.5rem !important;
            margin-bottom: 0 !important;
        }
    }

    h3 {
        margin: 0;
        font-family: var(--fyr-font-heading);
        font-size: 1.33em;
        /*font-variation-settings: var(--fyr-font-special-variation);*/
    }

    p, ul, ol {
        margin: 0;
        font-size: 0.85rem;
        color: var(--fyr-color-neutral);
        line-height: 1.5em;
        opacity: 0.85;
    }

    ul li {
        list-style-type: none;
        position: relative;

        &::before {
            content: '\2726';
            font-size: 1em;
            line-height: 0;
            position: absolute;
            left: -1.33em;
            top: 0.75em;
            /*color: var(--fyr-color-primary-alt)*/
            /*opacity: 0.66;*/
        }

        strong {
            /*font-size: 0.9em;*/
            /*font-family: var(--fyr-font-special), serif;*/
            /*font-variation-settings: var(--fyr-font-special-variation-black);*/
        }
    }

    a {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        color: var(--fyr-color-secondary);
        text-decoration: none;
        /*font-size: 1.25rem;*/
        line-height: 1.44em;

        &:not(:has(i)):hover,
        &:hover span {
            text-decoration: underline;
        }

        i {
            line-height: 0;
        }
    }
}

ul.tree-list {
    display: flex;
    flex-direction: column;
    margin: -3px 0;
    padding: 0;
    gap: 1rem;
    list-style: none;

    li {

        div.card {
            display: flex;
            flex-direction: row;
            gap: 1rem;
        }

        div.tree-list-icon {
            display: flex;
            flex-shrink: 0;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border-radius: 0.66rem;
            position: relative;

            &::before {
                content: '';
                display: block;
                position: absolute;
                inset: 0;
                border-radius: inherit;
                background: var(--fyr-color-neutral);
                opacity: 0.066;
            }

            i {
                font-size: 1.25rem;
                line-height: 0;
                color: var(--fyr-color-secondary);
            }
        }

        ul {
            padding-top: 0.25em;
            padding-left: 1.5rem;

            li {
                display: list-item;
                font-size: 0.85em;

                &::marker {
                    color: var(--fyr-color-neutral);
                }
            }
        }
    }
}

div.wp-block-kevinbatdorf-code-block-pro:not(.code-block-pro-editor) {
    border-radius: 1rem;
    margin: 2rem 0;
    padding: 1.25rem;

    &::before {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: var(--fyr-color-neutral-3d-red);
        transform: rotate(-1.1deg);
        opacity: 0.05;
    }

    &::after {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: var(--fyr-color-neutral-3d-blue);
        transform: rotate(1.1deg);
        opacity: 0.05;
    }

    > span:not([role="button"]) {
        padding: 0 0 1rem !important;
        background: none !important;
    }

    > pre {
        max-height: 600px;
        padding: 0 !important;
        background: none !important;
    }
}

[data-field] {
    grid-column: span attr(data-column-span type(<integer>), 1);
}

form.data-grid {
    display: grid;
    grid-template-columns: repeat(attr(data-columns type(<integer>)), 1fr);
    margin: 0;
    padding: 0;
    gap: 1.75rem;

    aside.thank-you {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        margin-top: 0;
        padding: 25% 0;
        grid-column: span 2;

        h3 {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1em;

            i {
                color: var(--fyr-color-secondary);
                font-size: 100px;
            }

            span {
                font-size: 40px;
                line-height: 1.4;
                font-weight: lighter;
                text-align: center;
                color: var(--fyr-color-neutral);
            }
        }
    }

    aside.application-loader {
        width: 100%;
        height: auto;
        margin-top: 0;
        padding: 25% 0;
        grid-column: span 2;
    }

    div.form-field {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0.75em;
        padding: 0.1em;

        label {
            font-size: 14px;
            font-family: inherit;
            font-weight: bold;
            color: var(--fyr-color-neutral);

            sup {
                color: var(--fyr-color-quaternary);
            }
        }

        textarea,
        input[type="tel"],
        input[type="text"],
        input[type="email"] {
            width: 100%;
            padding: 0.7rem 1.2rem;
            box-sizing: border-box;
            border-radius: 100px;
            border: 1px solid rgb(255 255 255 / 16.66%);
            background: none;
            color: var(--fyr-color-white);
            font-size: 1.1em;
            font-family: var(--fyr-font-regular), sans-serif;

            &::placeholder {
                color: var(--fyr-color-neutral);
                opacity: 0.33;
            }

            &:hover,
            &:focus {
                border-color: var(--fyr-color-white);
                outline: none;
            }
        }

        textarea {
            border-radius: 22px !important;
            height: 240px;
        }

        div.tile-select {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75em;

            input {
                display: none;

                + label {
                    cursor: pointer;
                    user-select: none;
                    display: flex;
                    align-items: center;
                    width: 100%;
                    gap: 0.5rem;
                    padding: 0.7rem 1.2rem 0.7rem 1rem;
                    box-sizing: border-box;
                    border-radius: 100px;
                    border: 1px solid rgb(255 255 255 / 16.66%);
                    background: none;
                    color: var(--fyr-color-neutral);
                    font-size: 0.75em;
                    font-weight: normal;

                    &:hover {
                        color: var(--fyr-color-white);
                        border-color: var(--fyr-color-white);

                        i, span {
                            opacity: 1;
                        }
                    }

                    i {
                        font-size: 20px;
                        opacity: 0.75;
                    }

                    span {
                        opacity: 0.75;
                    }
                }

                &:checked + label {
                    color: var(--fyr-color-secondary);
                    border-color: var(--fyr-color-secondary);
                    background-color: var(--fyr-color-secondary-glow);

                    i, span {
                        opacity: 1;
                    }
                }
            }
        }
    }

    footer.form-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-column: span 2;
        padding-top: 2em;

        button {
            display: inline-flex;
            align-items: center;
            padding: 12px 24px 12px 30px;
            gap: 12px;
            color: var(--fyr-color-white);
            background: var(--fyr-color-primary);
            border: none;
            border-radius: 100px;
            text-decoration: none;
            font-family: inherit;
            font-size: 1.25rem;
            font-weight: bold;

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