@media all {

  .ti-tdh-groups-map-container {
    display: flex;
    flex-direction: column;
    gap: var(--size-4);

    & .form-map-filter {
      display: none;

      & ul {
        display: flex;
        gap: var(--size-2);

        & li {
          margin-top: 0;

          & .btn {          
            color: var(--ce-color-fg);
            border: 2px solid var(--ce-color-fg);
            border-radius: 100vw;
            min-height: 100%;
            display: flex;
            align-items: center;
            gap: var(--size-1);
            padding: calc(var(--size-1) * 1.5) var(--size-2);
            font-size: var(--font-size-small);

            &:hover, 
            &:focus,
            &:focus-visible,
            &:has(input:checked) {
              color: var(--ce-color-bg);
              background: var(--ce-color-fg);

            }

            & .ti-tdh-map-filter-item-icon {
              aspect-ratio: 1;
              height: 2em;
              mask-size: 100%;
              mask-repeat: no-repeat;
              mask-position: center;
              background-color: var(--ce-color-fg);
            }

            &:hover, 
            &:focus,
            &:focus-visible,
            &:has(input:checked) {

              & .ti-tdh-map-filter-item-icon {
                background-color: var(--ce-color-bg);
              }

            }

          }

        }

      }

    }

    &.map-loaded .form-map-filter {
      display: flex;
    }

    & .ti-tdh-groups-map {
      border-radius: var(--border-radius-small);
      box-shadow: var(--box-shadow-32);
      position: relative;
      overflow: clip;
      
      &::before ,
      &::after {
        content: "";
        position: absolute;
        inset: 0;
      }
      
      &::before {
        background-color: var(--ce-color-fg);
        background-color: rgb(0,0,0);
        z-index: 1;
      }
      
      &::after {
        background-image: url("../Images/GroupMap/map_placeholder.jpg");
        background-size: 100% auto;
        background-position: center;
        z-index: 1;
        opacity: .875;
      }
      
      & .ce-media-overlay {
        position: relative;
        z-index: 3;
      }

      & .ti-tdh-groups-infowindow {
        font-family: var(--font-family-body);
        font-size: 1rem;
        line-height: 1.375;
        min-width: 12vw;
        color: var(--color-darkpurple);
        display: flex;
        flex-direction: column;
        gap: var(--size-2);

        & a {
          color: inherit;

          &:hover,
          &:focus,
          &:focus-visible {
            color: var(--color-red);            
          }

        }

        & .ti-tdh-groups-infowindow-header strong {
          font-size: 1.375rem;
        }
        
        & .ti-tdh-groups-infowindow-item-email ,
        & .ti-tdh-groups-infowindow-item-website {
          
          & dt {
            visibility: hidden;
            height: 0;
          }
          
        }

      }

      & .ce-media-overlay {
        margin-block: var(--page-gap);
      }

    }

    &.map-loaded .ti-tdh-groups-map {
      width: 100%;
      aspect-ratio: 16 / 9;
      max-height: min(57.5rem, calc(100vh - ((var(--logo-height) + (var(--logo-padding) * 2)) + (var(--p  -webkit-fill-availableage-padding) * 2))));
      min-height: 25vw;
      
      &::before ,
      &::after {
        display: none;
      }
      
    }

  }

}

@media (orientation: portrait) {

  .ti-tdh-groups-map-container {

    &.map-loaded .ti-tdh-groups-map {
      aspect-ratio: 1;
    }

  }

}

@media (max-aspect-ratio: 2 / 3) { 

  .ti-tdh-groups-map-container {

    &.map-loaded .ti-tdh-groups-map {
      aspect-ratio: 2 / 3;
    }

  }

}