/* Title logo — UNESCO Global Geopark */
:root {
    /* logo setting */
    --logo-width: 80px;
    --logo-url: url(/content/dam/dhk/common/logo/logo-unesco-global-geopark.png);
    --logo-top-margin: 0px;
    /* default setting (don't change) */
    --default-logo-padding: 20px;
    --default-logo-height: 60px;
}

/* POI page */
.dynamic-page-details__title-wrap .title.heading {
    position: relative;
    padding-right: calc(var(--logo-width) + var(--default-logo-padding));
    min-height: var(--default-logo-height);
}

.dynamic-page-details__title-wrap .title.heading:after {
    display: block;
    content: '';
    position: absolute;
    right: 0;
    top: var(--logo-top-margin);
    width: var(--logo-width);
    height: var(--default-logo-height);
    background-image: var(--logo-url);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: auto var(--default-logo-height);
}

/* Article page */
.sharing {
    position: relative;
    padding-right: 20px;
    min-height: calc(var(--default-logo-height) + 20px);
}

.sharing:after {
    display: block;
    content: '';
    float: right;
    width: var(--logo-width);
    height: var(--default-logo-height);
    margin-top: 20px;
    background-image: var(--logo-url);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: auto var(--default-logo-height);
}

/* GOHK Route page */
.route .sharing {
    padding: 4px 0 15px;
    min-height: calc(var(--default-logo-height) + 12px);
}

.route .sharing:after {
    margin-top: 12px;
}

@media (max-width: 1024.98px) {
    html[dir] .route.mb .route-content .route-article .sharing .sharing__container {
        width: auto !important;
    }
}

@media (max-width: 767.98px) {
    :root {
        /* logo setting */
        --logo-width: 67px;
        /* default setting (don't change) */
        --default-logo-padding: 10px;
        --default-logo-height: 50px;
    }

    .sharing {
        padding-right: 10px;
        min-height: calc(var(--default-logo-height) + 12px);
    }

    .sharing:after {
        margin-top: 12px;
    }
}