.mobile .info-hotspot-modal {

    position: absolute;

    display: none;

    width: 100vw;
    height: calc(100vh - var(--banner-height));
    left: 0;
    top: var(--banner-height);

}



.mobile .info-hotspot-modal.visible {

    display: grid !important;
    gap: 0;
    /* TODO minmax for auto width above a certain min width */
    grid-template-columns: auto;
    grid-template-rows: var(--titleBar-height) auto;
    grid-template-areas:
        "header"
        "content";

    pointer-events: none;

}



/* CONTENT STYLING */

.mobile .info-hotspot-modal .info-hotspot-content {

    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;

    display: flex;
    flex-direction: column;

    transform: scaleY(0);
    opacity: 0;
    margin-top: calc(0.5 * var(--titleBar-height));

    padding: 20px 20px;

    background-color: var(--background-rgba);

    -webkit-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    transform-origin: 0px 0px;

    -webkit-transition: opacity 0.3s ease-in-out,
        transform 0.3s ease-in-out,
        margin-top 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out,
        transform 0.3s ease-in-out,
        margin-top 0.3s ease-in-out;

    pointer-events: all;
    z-index: 5;

}



.mobile .info-hotspot-modal.visible .info-hotspot-content {

    transform: scaleY(1);
    opacity: 1;
    margin-top: 0;

}



.mobile .info-hotspot-modal .info-hotspot-subtitle-container {

    margin-top: var(--titleBar-height);

}



.mobile .info-hotspot-modal .info-hotspot-media-container {

    display: grid;
    gap: 0;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "media";

    padding: 10px 0px;

}



/* full width only when hotspot is opened */
.mobile .info-hotspot-modal.visible .info-hotspot-media-container {
    width: 100%;

}



.mobile .info-hotspot-modal .info-hotspot-text-container {

    padding: 10px 0px;

}



/* HEADER STYLING */

.mobile .info-hotspot-modal .info-hotspot-header {

    grid-area: header;

    display: grid;
    gap: 0;
    grid-template-columns: var(--titleBar-height) auto var(--titleBar-height);
    grid-template-rows: var(--titleBar-height);
    grid-template-areas: "info title close";

    align-items: center;

    width: var(--titleBar-height);
    padding: 0px;

    background-color: var(--highlight-rgb);

    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: 0px 0px;

    -webkit-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;

    cursor: pointer;
    pointer-events: all;
    z-index: 10;

}



.mobile .info-hotspot-modal .info-hotspot-header:hover {

    width: 100%;

}



.mobile .info-hotspot-modal.visible .info-hotspot-header {

    width: 100%;

}



.mobile .info-hotspot-modal .info-hotspot-label-circle {

    grid-area: info;

    width: var(--titleBar-height);
    height: 100%;

    border: 2px solid white;
    border-radius: var(--border-radius);

}



.mobile .info-hotspot-modal .info-hotspot-label-container {

    grid-area: info;

    width: var(--titleBar-height);
    height: 100%;

}



.mobile .info-hotspot-modal .info-hotspot-label-container>p {

    color: var(--background-rgb);
    font-weight: 400;
    font-size: 130%;
    text-align: center;
    line-height: var(--titleBar-height);

}



.mobile .info-hotspot-modal .info-hotspot-info-icon {

    grid-area: info;

}



.mobile .info-hotspot-modal .info-hotspot-close-icon {

    grid-area: close;

    justify-self: center;
    align-self: center;

    width: var(--icon-size);
    height: var(--icon-size);

    transform: scale(0);
    opacity: 0;
    fill: var(--icon-rgb);

    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;

    -webkit-transition: transform 0.3s ease-in-out,
        fill 0.3s ease-in-out,
        opacity 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out,
        fill 0.3s ease-in-out,
        opacity 0.3s ease-in-out;

}



.mobile .info-hotspot-modal .info-hotspot-header:hover .info-hotspot-close-icon {

    fill: var(--background-rgb);

}



.mobile .info-hotspot-modal.visible .info-hotspot-close-icon {

    transform: scale(1);
    opacity: 1;

}



.mobile .info-hotspot-modal .info-hotspot-title-container {

    grid-area: title;

    align-self: flex-start;

    transform: scaleX(0);
    opacity: 0;
    padding: 0px 20px;

    -webkit-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    transform-origin: 0px 0px;

    -webkit-transition: transform 0.3s ease-in-out,
        opacity 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out,
        opacity 0.3s ease-in-out;

}



.mobile .info-hotspot-modal .info-hotspot-header:hover .info-hotspot-title-container {

    transform: scaleX(1);
    opacity: 1;

}



.mobile .info-hotspot-modal.visible .info-hotspot-title-container {

    transform: scaleX(1);
    opacity: 1;
    padding: 0px 0px;
    padding-left: 10px;

}


.mobile .info-hotspot-modal .info-hotspot-title-container>p {

    line-height: var(--titleBar-height);

    color: var(--background-rgb);

    max-width: 77vw;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}