/* Fix the Gallery v6 aspect ratio issues as well as the mobile-specific issues 
- Confluence documentation: https://apptegy.atlassian.net/wiki/x/YIAEyQ 
*/
#home .g6 .slide {
    --image-height: 44vw;

    .image,
    .image,
    .main-content,
    .responsive-image img,
    .slide-wrapper {
        height: var(--image-height);
    }
}

@media only screen and (min-width: 599px) and (max-width: 960px) {
    #home .g6 {
        --button-size: 35px;

        .main-content-title {
            width: 70%;
            margin-left: 0;
            padding-left: 20px;
            box-sizing: border-box;
        }

        .main-content-button {
            position: absolute;
            width: auto;
            bottom: 40px;
            left: 20px;
            margin: 0;

            svg {
                height: var(--button-size);
                width: var(--button-size);
            }
        }
    }
}

@media only screen and (max-width: 760px) {
    #home .g6 {
        --button-size: 30px;

        .slide {
            display: flex;
            flex-direction: column;
        }

        .slide-wrapper,
        .main-content {
            display: contents;
        }

        .main-content-title {
            order: 2;
            background-color: var(--main-gallery-content-bg-color, var(--widget-button-background-color));
            color: var(--main-gallery-content-text-color, var(--widget-button-icon-color));
            margin: 0;
            box-sizing: border-box;
            padding: 10px 20px;
            width: 100%;

            &::before {
                display: none;
            }
        }

        .main-content-button {
            bottom: auto;
            top: calc(var(--image-height) - var(--button-size) - 10px);
            z-index: 2;

            &:has(.gallery-pager) {
                top: calc(var(--image-height) - var(--button-size) - 50px);
            }

            svg {
                height: var(--button-size);
                width: var(--button-size);
            }
        }

        .image {
            position: relative;
        }

        .slide-wrapper .widget {
            position: relative;
            width: 100%;
            box-sizing: border-box;
            order: 3;
        }

        .slide-wrapper .gallery-decoration {
            order: 4;
            z-index: 2;
        }
        .widget-button {
            width: 35px;
            height: 35px;
        }
    }
}
/* END - Fix the Gallery v6 aspect ratio issues as well as the mobile-specific issues */