/*
 * Content Section Styles
 */

.column-content-section {
    position: relative;
    overflow: hidden;
}

/* Purple gradient top-left - only applies when class is added */
.column-content-section.purple-top-gradient::before {
    content: '';
    position: absolute;
    top: -250px;
    left: -250px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(148, 115, 249, 0.3) 0%, rgba(148, 115, 249, 0.15) 40%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.column-content-section .container {
    position: relative;
    z-index: 2;
}

.column-content-section .section-content p:has(img):not(:first-child) {
    margin: 40px 0 0;
}

@media (min-width: 992px) {
    .column-content-section .left-column-content {
        padding-right: 15px;
    }
    .column-content-section .right-column-content {
        padding-left: 15px;
    }
    .column-content-section .container {
        align-items: center;
    }
}

@media (max-width: 991px) {
    .column-content-section.purple-top-gradient::before {
        top: -180px;
        left: -180px;
        width: 360px;
        height: 360px;
    }
    
    .column-content-section .section-content p:has(img):not(:first-child) {
        margin: 20px 0;
    }
}

@media (max-width: 575px) {
    .column-content-section.purple-top-gradient::before {
        top: -120px;
        left: -120px;
        width: 240px;
        height: 240px;
    }
}