/*
   ========================================
            Styling for variant 1
   ========================================
*/
main .variant1 {
    & > *:nth-child(even) {
        background-color: var(--secondary);
    }
}

main section.variant1 {
    & > *:not(:last-child):not(.quote-block) {
        /*
            Override the bottom margin set by children,
            except for the last instance, since variant1
            has no spacing between items.
        */
        margin-bottom: 0 !important;
    }
}

/*
   ========================================
            Styling for variant 2
   ========================================
*/
main section.variant2 {
    & > *:nth-child(even):not(.quote-block) {
        background-color: var(--secondary);
        box-shadow: inset calc(-1 * var(--px20)) 0 0 0 var(--secondary-alt);
        border-bottom-right-radius: 0;

        @media (max-width: 768px) {
            box-shadow: inset calc(-1 * var(--px5)) 0 0 0 var(--secondary-alt);
        }
    }
}

main section.variant2 {
    & > *:nth-child(odd):not(.quote-block) {
        box-shadow: inset var(--px20) 0 0 -1px var(--secondary-alt);
        border-top-left-radius: 0;

        @media (max-width: 768px) {
            box-shadow: inset var(--px5) 0 0 -1px var(--secondary-alt);
        }
    }
}

/*
   ========================================
            Styling for variant 3
   ========================================
*/
main section.variant3 {
    & > *:nth-child(n) {
        box-shadow: 0 0 var(--px60) rgba(0, 0, 0, 0.1);
        background: var(--white);
    }
}

/*
   ========================================
            Styling for variant 4
   ========================================
*/
main section.variant4 {
    position: relative;

    & > *:nth-child(even):not(.quote-block) {
        position: relative;
        background-color: var(--light-gray);
        border-radius: 0;

        &::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: var(--px20);
            height: 100%;
            background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
        }

        @media (max-width: 768px) {
            &::after {
                width: var(--px5);
            }
        }
    }

    & > *:nth-child(odd):not(.quote-block) {
        position: relative;
        border-radius: 0;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: var(--px20);
            height: 100%;
            background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end));
        }

        @media (max-width: 768px) {
            &::before {
                width: var(--px5);
            }
        }
    }
}

/*
   ========================================
       Shared styling between variants
   ========================================
*/

/*
    Override the color of all headings to the quinary color when the 3rd or
    4th variant is active. The data-heading attribute can be applied for the
    coloring non-heading elements.
*/
main .variant3, main .variant4 {
    h1, h2, h3, h4, h5, h6, [data-heading] {
        color: var(--quinary);
    }
}

/*
   ========================================
       Styling for Quote block within elements
   ========================================
*/

main .quote-block {
    display: flex;
    width: 100%;
    margin: var(--px60) var(--px0);
    position: relative;
}

main .fa-quotes {
    font-size: var(--px110);
    padding-right: var(--px40);
    align-self: self-start;
    color: var(--quinary);
}

main .text-box {
    display: flex;
    flex-direction: column;
}

main .person-name:not(:empty) {
    font-weight: 700;
    font-size: var(--px18);
}

main .quote {
    font-size: var(--px30);
    font-weight: 300;
    font-style: italic;
    line-height: var(--px45);
}

main .quote-block-content {
    display: flex;
    flex-direction: row;
}

@media (max-width: 1024px) {
    main .quote-block {
        border-bottom-left-radius: var(--px30);
        border-top-right-radius: var(--px30);
        margin: var(--px50) var(--px0);
    }
}

@media (max-width: 768px) {
    main .quote-block-content {
        display: flex;
        flex-direction: column;
    }

    main .fa-quotes {
        font-size: var(--px60);
        padding-bottom: var(--px20);
    }

    main .quote {
        font-size: var(--px26);
        margin-top: var(--px0);
    }

    main .quote-block {
        margin: var(--px30) var(--px0);
    }
}