'How to add styles to Sitecore Gallery module if Im using the same module on other pages

I have been stuck for hours. I have 4 Gallery modules I need to add styles/css on 1 module . When I tried to add class on Gallery-main I noticed that my entire module got the class name so I cannot edit the css of 1 module because it will affect the other module. Is there anyone who can help here so I can solve my problem ?

 <div class="Gallery-container pham1">
    <gallery v-cloak>
        <gallery-main class="pham" :show-expand="@Model.ShowExpandButton.ToString().ToLower()">
            @{
                var a = new Foundation.AdvancedImage.Helper();

                foreach (var childImage in Model.Children)
                {
                    string imageText = "";
                    if (Model.ShowImageCaptionInNormalMode)
                    {
                        imageText = childImage.Image?.GetTarget<ItemWrapper>()?.InnerItem()?["Description"];
                    }

                    var model = childImage.Image.GetSourceSet(Model.BreakPoints, imageClass: "Image--fill");
                    model.DesktopColumns = Model.DesktopColumns;
                    model.TabletColumns = Model.TabletColumns;

                    var previewUrl = childImage.Image?.GetSourceUri(new AdvancedImageFieldWrapperOptions() { CropWidth = 276, CropHeight = 155 });

                    <gallery-item :preview="'@previewUrl'" :caption="'@imageText'">
                        @Html.Partial("~/Views/Ahhg/SrcsetPicture.cshtml", model)
                    </gallery-item>
                }
            }
        </gallery-main>
        <gallery-full>
            @{
                foreach (var childImage in Model.Children)
                {
                    string imageText = "";
                    if (Model.ShowImageCaptionInFullScreenMode)
                    {
                        imageText = childImage.Image?.GetTarget<ItemWrapper>()?.InnerItem()?["Description"];
                    }

                    var model = childImage.Image.GetSourceSet(ModuleBreakpoints.FullScreenGallery, wrapper: false, ignoreContainer: true);
                    var previewUrl = childImage.Image.GetSourceUri(new AdvancedImageFieldWrapperOptions() { CropWidth = 276, CropHeight = 155 });

                    <gallery-item :preview="'@previewUrl'" :caption="'@imageText'" :fit="true">
                        @Html.Partial("~/Views/Ahhg/SrcsetPicture.cshtml", model)
                    </gallery-item>
                }
            }
        </gallery-full>
    </gallery>
</div>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source