/**
 * Component: Column Text
 * 
 * Styles for the Column Text component.
 *
 * @package SCDA-2025
 */

/* Basic component styling */
.column-text {
    h2 {
        margin-bottom: var(--bs-gutter-y);
    }
    .columns-five {
        .column {
            @media screen and (min-width: 992px) {
                width: calc(100% / 5);
            }
        }
    }
    .columns-seven {
        .column {
            @media screen and (min-width: 1200px) {
                width: calc(100% / 7);
            }
        }
    }
    .columns-eight {
        .column {
            @media screen and (min-width: 1200px) {
                width: calc(100% / 8);
            }
        }
    }
    .columns-nine {
        .column {
            @media screen and (min-width: 1200px) {
                width: calc(100% / 9);
            }
        }
    }
    .columns-ten {
        .column {
            @media screen and (min-width: 1200px) {
                width: calc(100% / 10);
            }
        }
    }
    .columns-eleven {
        .column {
            @media screen and (min-width: 1200px) {
                width: calc(100% / 11);
            }
        }
    }
    .column-image {
        margin-bottom: var(--spacing-xs);

        img {
            width: 100%;
            height: auto;
        }
    }
    .text-content {
        margin-bottom: -1rem;

        a {
            color: var(--color-scda-tan);
            transition: .2s ease-in-out;

            &:hover, &:focus-visible {
                text-decoration: none;
            }
        }
    }
    .button-group {
        margin-top: 40px;
    }
}