.responsive-font {
  @media (min-width: $bp-xxxl) {
    font-size: $responsive-font-size-base;

    // Bootstrap's spacing utilities defines the margin and padding classes (m-1, px-5 etc.)
    // These variables and imports recompile the spacing utility to use spacers based on vw instead of the default rem.
    $custom-spacer: 1vw;
    $spacers: (
      0: 0,
      1: $custom-spacer * 0.25,
      2: $custom-spacer * 0.5,
      3: $custom-spacer * 1,
      4: $custom-spacer * 1.5,
      5: $custom-spacer * 3
    );
    $grid-breakpoints: (
      'xs': 0,
      'sm': 576px,
      'md': 768px,
      'lg': 992px,
      'xl': 1200px
    );
    /* stylelint-disable no-invalid-position-at-import-rule */
    @import '~bootstrap/scss/mixins/breakpoints';
    @import '~bootstrap/scss/utilities/spacing';
    /* stylelint-enable no-invalid-position-at-import-rule */

    header {
      .col {
        margin-bottom: 1em;
      }
    }

    h1 {
      font-size: 2.125vw;
    }

    .badge {
      font-size: $responsive-font-size-small;
      border-width: 0.0625vw;
      border-radius: 0.25vw;

      img {
        width: 1.75vw;
        height: 1.75vw;
        left: 0.25vw;
      }

      .organisation-logo {
        width: 1.75vw;
        height: 1.75vw;
      }

      .close {
        margin-left: 0.5vw;

        &::before {
          font-size: 1vw;
        }
      }
    }

    .badge-pill {
      border-radius: 1.125vw;
      padding: 0.25vw 0.75vw;
      height: 2.25vw;
      min-width: 4vw;

      &.img-chip {
        padding: 0.25vw 0.75vw 0.25vw calc(0.75vw + 1.75vw);
      }
    }

    .badge-outline-light {
      height: 2.25vw;
      padding-left: 0.5vw;
      padding-right: 0.5vw;
      max-width: 15vw;

      &.active {
        box-shadow: 0 0.25vw 0.5vw rgb(0 0 0 / 15%);
      }

      .icon-clear {
        font-size: 1.25vw;
        margin-left: 0.25vw;
      }
    }

    .form-control {
      font-size: $responsive-font-size-base;
    }

    .content-card {
      font-size: $responsive-font-size-base;

      .card-subtitle {
        font-size: $responsive-font-size-extrasmall;
        margin-bottom: 0.75em;
      }

      .card-body {
        padding: 1.5em;
      }

      .card-title {
        font-size: $responsive-font-size-large;
        line-height: 1.25em;
        max-height: none;
      }
    }

    .btn-light-flat.button-icon-only {
      font-size: 1.1vw;
      height: 1.5em;
      width: 1.5em;

      &.icon-clear,
      &.icon-filter {
        font-size: $responsive-font-size-large;
        height: 1em;
        width: 1em;
      }
    }

    .eu-logo {
      height: 4vw;
      width: auto;
    }
  }
}