.photo_gallery_before_after {
    background-color: var(--dark-bkgd);
}

.photo_gallery_before_after .gallery-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 15px;
    row-gap: 15px;
    width: 100%;
    margin-top: 25px;
}

.photo_gallery_before_after h2 {
    color: var(--accent);
}

.photo_gallery_before_after .gallery-container img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.photo_gallery_before_after .gallery-item-wrapper {
    position: relative;
}

.photo_gallery_before_after .gallery-item-wrapper:nth-child(odd) .gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--primary-rgb);
    padding: 15px;
    color: var(--light-text);
}

.photo_gallery_before_after .gallery-item-wrapper:nth-child(even) .gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--accent-rgb);
    padding: 15px;
}

.photo_gallery_before_after .gallery-container img:hover {
   cursor: pointer;
   opacity: 0.8;
   transition: 0.3s;
}

.photo_gallery_before_after p {
    color: var(--light-text);
    margin-bottom: 15px;
    max-width: 760px;
}
.photo_gallery_before_after .content_div {
        width: 100%; 
        box-sizing: border-box; 
}


.photo_gallery_before_after ul li, .photo_gallery_before_after ol li, .photo_gallery_before_after a {
   color: var(--light-text);

}

@media (max-width: 992px)
{
    .photo_gallery_before_after .primary_button {
        max-width: 60%;
      
    }
}

@media (max-width: 768px)
{
    .photo_gallery_before_after .primary_button {
        max-width: 60%;
    }

    .photo_gallery_before_after p {
        max-width: 100%;
    }

    .photo_gallery_before_after .gallery-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 15px;
        row-gap: 15px;
    }

    .photo_gallery_before_after .gallery-container img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
}

@media (max-width: 480px)
{

    .photo_gallery_before_after .gallery-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .photo_gallery_before_after .gallery-container img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
}