@media all {

  .tdh-groups-filter {

    .tdh-groups-filter-inner {
      --grid-columns: 2;
      display: grid;
      grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
      gap: var(--container-gap);
      justify-content: end;
      align-items: end;

      label {
        grid-column: 1 / -1;
      }

      + .form-infotext {
        margin-top: .5rem;
        transition: var(--transition-default);

        &[style="visibility:hidden"] {
          margin-top: 0;
          height: 0;
        }

      }

      .btn {
        font-size: inherit;
      }

      select.form-control {
        background-image: url("../Icons/sprite-svgs/arrow-single-down.svg");
        background-size: 2.125em;
        background-repeat: no-repeat;
        background-position: right .25em center;
      }

    }

    +:has(>.tdh-groups) {
      margin-top: var(--page-gap, 1rem);
    }

  }

  .tdh-groups {
    --table-border: 2px solid color(from var(--ce-color-fg) srgb r g b / 0.1);
    width: 100%;
    border-collapse: collapse !important;
    border-bottom: var(--table-border);

    .tdh-groups-thead {
      display: none;
    }

    .tdh-group-row {
      padding: var(--size-4) 0;
      display: flex;
      flex-wrap: wrap;
      align-items: start;
      border-top: var(--table-border);
      gap: var(--size-1) var(--size-2);

      > * {
        vertical-align: top;
        width: 100%;
      }

      .tdh-group-email ,
      .tdh-group-website {
        width: auto;
      }

    }

  }

  .tdh-group-icon-link {
    position: relative;
    display: block;
  }

  .tdh-group-icon-link:focus ,
  .tdh-group-icon-link:hover {
    fill: red;
  }

  a.tdh-group-icon-link:is(:hover,:focus-visible) {
    color: var(--ce-color-but);
    color: var(--ce-color-cta-bg);
  }

  .tdh-group-icon-link::after {
    content: "";
    position: absolute;
    display: block;
    inset: 0;
    margin: -6%;
    background-image: url("../Images/Footer/WebP/social-button-hover-darkpurple.webp");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: var(--transition-default);
    opacity: 0;
  }

  .tdh-group-icon-link:is(:hover, :focus)::after {
    opacity: 1;
  }

  .ce-theme-dark-purple .tdh-group-icon-link::after {
    background-image: url("../Images/Footer/WebP/social-button-hover-offwhite.webp");
  }

}

@media (min-width: 48rem) {

  .tdh-groups {

    .tdh-groups-thead {
      display: table-header-group;
    }

    .tdh-group-row {
      display: table-row;

      > * {
        padding: .75em;      
        width: initial;
      }

    }

  }

}

@media (min-width: 80rem) {

  .tdh-groups-filter {

    .tdh-groups-filter-inner {
      --grid-columns: 4;

      label {
        grid-column: unset;
      }

    }

  }

}