/**
 * Section: double-column-circle-repeater
 *
 * Extracted from template-parts/double_column_circle_repeater.php.
 * Loaded via trunorth_enqueue_section('double-column-circle-repeater').
 */

.dc-circle-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc(var(--vw) * 2);
        align-items: center;
        padding: calc(var(--vw) * 3.75) calc(var(--vw) * 5);
        font-family: 'Open Sans', sans-serif;
        background-color: #F5F5F5;

        &.dc-circle-row--reversed {
            direction: rtl;

            & > * {
                direction: ltr;
            }
        }

        .dc-circle-content {
            display: flex;
            flex-direction: column;
            gap: calc(var(--vw) * 1);

            .dc-circle-tag {
                font-size: var(--font-medium-large);
                font-weight: 300;
            }

            h2 {
                font-size: var(--font-h2);
                font-weight: 600;
            }

            p {
                font-size: var(--font-medium-large);
                font-weight: 400;
            }
        }

        .dc-circle-cta {
            margin-top: calc(var(--vw) * 2);
        }

        .dc-circle-image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            border-radius: 50%;
            background-color: #D9D9D9;
            width: calc(var(--vw) * 40);
            aspect-ratio: 1/1;
            overflow: clip;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        @media (max-width: 768px) {
            & {
                grid-template-columns: 1fr;
                gap: calc(var(--vw) * 3);
                padding: calc(var(--vw) * 3) calc(var(--vw) * 5);

                &.dc-circle-row--reversed {
                    direction: ltr;
                }
            }

            .dc-circle-image-container {
                width: 65%;
                order: 2;
            }

            .dc-circle-content {
                order: 1;
            }
        }
    }