.wp-block-verse-cards {
    position: relative;
    padding: 145px 0;

    @media (min-width: 768px) {
        padding: 193px 0 132px 0;
    }

    .inner-container {
        width: 73%;
        margin: 0 auto;

        @media (min-width: 768px) {
            width: 82%;
        }
    }

    .divider {
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
        width: 4px;
        height: 0;
        background-color: var(--orange);
    }

    .headline {
        color: var(--orange);
        text-align: center;
        font-family: Juana;
        font-size: 4.375rem;
        font-style: normal;
        font-weight: 600;
        line-height: 52px; /* 74.286% */
        text-transform: uppercase;

        @media (min-width: 768px) {
            font-size: 5rem;
        }
    }

    .instructions {
        margin-top: 21px;
        color: var(--grey);
        text-align: center;
        font-family: "Brandon Text";
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 420;
        line-height: 139%; /* 19.46px */

        @media (min-width: 768px) {
            display: none;
        }
    }

    .cards {
        margin-top: 28px;

        @media (min-width: 768px) {
            margin-top: 52px;
        }

        .card {
            position: relative;
            aspect-ratio: 0.85;
            border: 1px solid var(--orange);
            cursor: pointer;

            @media (min-width: 768px) {
                aspect-ratio: 1.2;
            }

            .title {
                color: var(--grey);
                text-align: center;
                font-family: Juana;
                font-size: 1.5rem;
                font-style: normal;
                font-weight: 600;
                line-height: 120%; /* 28.8px */
            }

            .citation {
                display: block;
                text-align: center;
                font-family: "Brandon Text Bold";
                font-size: 0.875rem;
                font-style: normal;
                font-weight: 450;
                line-height: 139%; /* 19.46px */
                text-transform: uppercase;
            }

            .verse {
                margin-top: 5px;
                color: #FFF;
                text-align: center;
                font-family: "Brandon Text";
                font-size: 0.875rem;
                font-style: normal;
                font-weight: 420;
                line-height: 139%; /* 19.46px */
            }

            .front-container {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .citations {
                    margin-top: 10px;

                    .citation {
                        margin-top: 4px;
                        color: var(--red);
                    }
                }
            }

            .back-container {
                opacity: 0;
                position: absolute;
                z-index: 3;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                background-color: var(--orange);
                transition: opacity 200ms ease-in;

                .copy-container {
                    padding: 10px 24px;
                }

                .verse-container {
                    margin-top: 24px;

                    &:first-child {
                        margin-top: 8px;
                    }
                }

                .citation {
                    color: #fff;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        } /* card */

        .card-carousel {

            @media (min-width: 768px) {
                display: none;
            }

            .card {
                margin: 0 10px;
            }

            .arrow {
                position: absolute;
                z-index: 5;
                top: 50%;
                transform: translateY(-50%);
                width: 24px;
                height: 24px;
                padding: 6px;
                border-radius: 50vw;
                background-color: var(--crimson);
                cursor: pointer;

                &.prev {
                    left: -2%;
                }

                &.next {
                    right: -2%;
                }
            }
        }

        .card-grid {
            display: none;
            
            @media (min-width: 768px) {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 20px;
            }

            .card {

                @media (min-width: 768px) {
                    width: calc(50% - 20px);
                    margin-top: 20px;
                }

                @media (min-width: 1400px) {
                    width: calc(30% - 20px);
                }

                @media (min-width: 1600px) {
                    width: calc(25% - 20px);
                }

                &:hover {
                    
                    .back-container {
                        opacity: 1;
                    }
                }
            }
        }
    } /* cards */
}