/**
 * Grøntmiljø Annoncer - Frontend Styles
 * Version: 1.1.0
 */

/* Base banner styles */
.gma-banner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 0 !important;
    font-size: 0 !important;
    box-sizing: border-box !important;
}

.gma-banner img,
.gma-banner .gma-banner-image,
.gma-banner img.gma-banner-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.gma-banner a,
.gma-banner .gma-banner-link,
.gma-banner a.gma-banner-link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.gma-banner .gma-banner-link:hover {
    opacity: 0.9;
}

/* Top banner styles */
.gma-banner.gma-banner-top {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}

.gma-banner-top .gma-banner-desktop,
.gma-banner-top .gma-banner-mobile {
    width: 100% !important;
    max-width: 100% !important;
}

.gma-banner-top img,
.gma-banner-top .gma-banner-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Desktop/Mobile switching */
.gma-banner-top .gma-banner-desktop {
    display: block !important;
}

.gma-banner-top .gma-banner-mobile {
    display: none !important;
}

/* Side banner styles */
.gma-banner.gma-banner-side,
.gma-banner.gma-banner-left,
.gma-banner.gma-banner-right {
    width: 100% !important;
    max-width: 100% !important;
}

.gma-banner-side img,
.gma-banner-side .gma-banner-image,
.gma-banner-left img,
.gma-banner-left .gma-banner-image,
.gma-banner-right img,
.gma-banner-right .gma-banner-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Responsive - Mobile */
@media screen and (max-width: 768px) {
    /* Switch top banner to mobile version */
    .gma-banner-top .gma-banner-desktop {
        display: none !important;
    }
    
    .gma-banner-top .gma-banner-mobile {
        display: block !important;
    }
    
    /* Hide side banners on mobile */
    .gma-banner.gma-banner-side,
    .gma-banner.gma-banner-left,
    .gma-banner.gma-banner-right {
        display: none !important;
    }
}