.home
  .search-filter
    @include flex-column (space-between, flex-start)
    font-size: 3.6vw
    height: 33vw
    width: 100%

    @include breakpoint-up (medium)
      flex-direction: row
      align-items: flex-start
      font-size: 1.2vw
      height: max-content
      margin: 2vw 0 0vw 0vw

    .search__input-wrapper
      border-radius: 1vw
      width: 100%
      height: $input-height-sm
      @include flex-row (space-between, center)
      @include input-wrapper
      @include breakpoint-up (medium)
        width: 33.5vw
        height: $input-height-l

      input
        outline: none
        border: none
        width: 100%
        height: 100%
        font-size: 3.18vw
        @include breakpoint-up (medium)
          font-size: 1vw

    .filter__drop-down-wrapper
      .drop-down
        @include flex-row (space-between, center)
        @include input-wrapper
        width: 57vw
        height: $input-height-sm
        position: relative

        @include breakpoint-up (medium)
          width: 14vw
          height: $input-height-l
        &__view
          @include flex-row (space-between, center)
          width: 100%
          padding: 0vw 1vw
        &__text
          @include breakpoint-up (medium)
            font-size: 1vw
        &__options
          position: absolute
          top: $input-height-sm + 0.7
          left: 0
          width: 100%
          border-radius: inherit
          z-index: 1
          padding: inherit
          a
            width: 100%
          @include breakpoint-up (medium)
            top: $input-height-l + 0.3
          button
            outline: none
            border: none
            text-align: left
            width: 100%
            margin: 0px
            padding: 1vw 1vw
            @include breakpoint-up (medium)
              padding: 0.3vw 0.7vw
              font-size: 1vw

  .infinite_scroll
    width: 100%
  .country__card-wrapper
    @include flex-column (center, center)
    width: 100%
    a
      text-decoration: none
    @include breakpoint-up (medium)
      flex-direction: row
      justify-content: space-between
      flex-wrap: wrap
      min-width: 50%
      width: 100%
      max-width: 100%
      height: 100%
    @include breakpoint-up (large)
      // margin: 0vw -1.5vw
      justify-content: space-between


.display
  @include flex-column (space-between, flex-start)

.hide
  display: none


.error__page
  @include flex-row (center, center)

.loader
  text-align: center
  margin: 9vw 0vw
  font-size: 4vw
  @include breakpoint-up (medium)
    margin: 3vw 0vw
    font-size: 1.2vw