#petfindercomponent {
  padding: 4rem 0; }
  #petfindercomponent .menu {
    border-radius: 8px;
    padding: 10px 0;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 2fr auto;
    align-items: end;
    grid-gap: 6px; }
    #petfindercomponent .menu .drops {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 4px; }
      #petfindercomponent .menu .drops input {
        width: auto;
        border: 1px solid #ddd;
        padding: .76rem 15px;
        margin: 0; }
      @media (max-width: 767px) {
        #petfindercomponent .menu .drops {
          display: block; }
          #petfindercomponent .menu .drops div {
            margin-bottom: 1rem; }
            #petfindercomponent .menu .drops div input {
              width: 100%; } }
    @media (max-width: 767px) {
      #petfindercomponent .menu {
        display: block; } }
  #petfindercomponent .page-menu {
    display: grid;
    grid-template-columns: 1fr;
    align-items: end; }
  #petfindercomponent .menu paging, #petfindercomponent .page-menu paging {
    justify-self: end; }
    #petfindercomponent .menu paging input, #petfindercomponent .page-menu paging input {
      color: #333;
      background-color: transparent;
      font-weight: 400;
      padding-left: 10px;
      padding-right: 10px; }
      #petfindercomponent .menu paging input.disabled, #petfindercomponent .page-menu paging input.disabled {
        color: #cdcdcd; }
  #petfindercomponent .content {
    padding: 20px 0;
    border-top: 1px solid #cdcdcd;
    border-bottom: 1px solid #cdcdcd;
    column-count: 3;
    column-gap: 10px; }
    @media (max-width: 992px) {
      #petfindercomponent .content {
        column-count: 2; } }
    @media (max-width: 767px) {
      #petfindercomponent .content {
        column-count: 1; } }
    #petfindercomponent .content .pet {
      margin: 0;
      display: grid;
      grid-template-rows: 1fr auto;
      margin-bottom: 20px;
      break-inside: avoid; }
      #petfindercomponent .content .pet > a {
        grid-row: 1 / -1;
        grid-column: 1; }
      #petfindercomponent .content .pet img {
        width: 100%;
        border-radius: 8px; }
      #petfindercomponent .content .pet .pet-info {
        font-size: 1.4rem;
        padding: 6px;
        display: flex; }
        #petfindercomponent .content .pet .pet-info info {
          flex: 4; }
          #petfindercomponent .content .pet .pet-info info name {
            display: block;
            font-weight: 900;
            font-size: 1.6rem; }
          #petfindercomponent .content .pet .pet-info info breed {
            display: block; }
          #petfindercomponent .content .pet .pet-info info agesize {
            display: block; }
        #petfindercomponent .content .pet .pet-info special {
          flex: 1;
          display: block; }
          #petfindercomponent .content .pet .pet-info special ul {
            text-align: right;
            padding: 0;
            margin: 0; }
          #petfindercomponent .content .pet .pet-info special ul.pet-special-ids {
            border: none;
            padding: 0;
            font-family: Oswald,sans-serif;
            text-transform: uppercase;
            color: #8fc61e; }
            #petfindercomponent .content .pet .pet-info special ul.pet-special-ids li {
              display: inline-block;
              margin-right: 5px;
              background: transparent url("https://www.petfinder.com/common/images/pf_sprite.png") no-repeat 0 -400px; }
              #petfindercomponent .content .pet .pet-info special ul.pet-special-ids li.no-dogs {
                background-position: 0 -221px;
                width: 50px;
                height: 32px; }
              #petfindercomponent .content .pet .pet-info special ul.pet-special-ids li.no-cats {
                background-position: -83px -191px;
                width: 36px;
                height: 32px; }
              #petfindercomponent .content .pet .pet-info special ul.pet-special-ids li.no-kids {
                background-position: -52px -222px;
                width: 37px;
                height: 31px; }
              #petfindercomponent .content .pet .pet-info special ul.pet-special-ids li.declawed {
                background-position: -58px -191px;
                width: 24px;
                height: 25px; }
              #petfindercomponent .content .pet .pet-info special ul.pet-special-ids li.special-needs {
                background-position: 0 -190px;
                width: 27px;
                height: 24px; }
              #petfindercomponent .content .pet .pet-info special ul.pet-special-ids li.has-video {
                background-position: -28px -191px;
                width: 28px;
                height: 28px; }
  #petfindercomponent span.video_icon_overlay {
    display: inline-block;
    background: transparent url("https://www.petfinder.com/common/images/pf_sprite.png") no-repeat 0 -400px;
    background-position: -28px -191px;
    width: 28px;
    height: 28px; }
  @media (max-width: 767px) {
    #petfindercomponent {
      padding: 0; } }