.Pricing {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    border-radius: 20px;

    & article:first-child {
        border-radius: 20px 20px 0 0;

        & header,
        & main,
        & footer {
            padding-bottom: 1.5rem;
        }

        & header {
            background-color: var(--color-orange-dark);
            color: var(--color-white);

            & .bg-icon {
                top: 60%;
            }
        }

        & .cols {
            & li .value {
                font-size: 1.5rem;
                font-weight: bold;
            }
        }
    }

    & article:last-child {
        border-radius: 0 0 20px 20px;

        & header,
        & main,
        & footer {
            padding-top: 1.5rem;
        }

        & header {
            background-color: var(--color-orange-dark);
            color: var(--color-white);
        }

        & .cols {
            & li .value {
                font-size: 1.5rem;
                font-weight: bold;
            }
        }
    }

    & article:nth-child(2) {
        width: 105%;
        margin-left: -2.5%;
        margin-right: -2.5%;
        border-radius: 20px;
        z-index: 2;

        & header {
            --size-difference: 7rem;
            width: calc(100% - 2rem);
            padding-top: var(--size-difference);
            padding-bottom: var(--size-difference);
            background-color: var(--color-orange);
            color: var(--color-black);

            & .bg-icon {
                right: 20%;
            }
        }

        & ul {
            & li .value {
                font-size: 3rem;
                font-weight: bold;
            }
        }
    }

    & article {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        background-color: var(--color-orange-black);
        overflow: hidden;

        & header,
        & main,
        & footer {
            padding: var(--spacing-standard);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        & footer {
            align-items: center;
            color: var(--color-orange);
            gap: .5rem;

            & .price {
                font-size: 2rem;
                font-weight: bold;
            }
        }

        & main {
            background-color: var(--color-orange-black);
            z-index: 1;
        }

        & header {
            position: relative;
            padding-right: 8rem;
            width: calc(100% + 8rem);

            & strong {
                font-size: 2rem;
                z-index: 1;
            }

            & .bg-icon {
                position: absolute;
                top: 50%;
                right: 40%;
                translate: 50% -50%;
                font-size: 6rem;
                opacity: 0.15;
            }
        }

        & li {
            display: flex;
            align-items: center;
            gap: .5rem;
        }

        & .list {
            display: flex;
            flex-direction: column;
            gap: .5rem;

            & .point-icon {
                color: var(--color-orange);
            }
        }

        & .list-container {
            display: flex;
            justify-content: center;
            gap: 4rem;
        }

        & .cols {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-evenly;
            gap: 1rem;

            & li {
                flex-direction: column;
            }

            & .color-icon {
                color: var(--color-orange);
            }
        }
    }
}