/* Columns With Photo Section Component */
.columns-with-photo-section .grid-card-with-photo:hover {
    background-color: none !important;
    background: none !important;
}

/* Opacity for images in subpage sections */
.columns-with-photo .grid-card-with-photo img {
    opacity: 0.5;
}

/* Column width utilities */
.columns-with-photo-section .column-width-50 {
    width: 100%;
}



/* Card width utilities */
.columns-with-photo-section .card-width-100 {
    width: 100%;
}

/* Photo card specific styles */
.columns-with-photo-section .grid-card-with-photo {
    overflow: hidden;
    border-radius: 0.5rem;
}

.columns-with-photo-section .grid-card-with-photo img {
    transition: opacity 0.3s ease;
}


@media (min-width: 768px) {
    .columns-with-photo .column-width-50 {
        width: calc(var(--width-two-card) - var(--gap-150-card)) !important;
        flex: 0 0 calc(var(--width-two-card) - var(--gap-150-card)) !important;
    }

    .columns-with-photo .first-column {
        border-right: 1px dashed var(--color-dashed-border) !important;
        border-left: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-image: repeating-linear-gradient(to bottom, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
        border-image-slice: 1 !important;
    }

    .columns-with-photo .second-column {
        border-left: 1px dashed var(--color-dashed-border) !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-image: repeating-linear-gradient(to bottom, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
        border-image-slice: 1 !important;
    }

    
}

/* Add border-dashed-right to second column on larger screens */
@media (min-width: 992px) {
    .columns-with-photo-section .featured-services__second-column {
        border: none !important;
        border-left: 1px dashed var(--color-dashed-border) !important;
        border-image: repeating-linear-gradient(to bottom, var(--color-dashed-border) 0, var(--color-dashed-border) 6px, transparent 6px, transparent 10px) 1 !important;
        border-image-slice: 1 !important;
    }
}