.pet-details {
  max-width: var(--max-width);
  width: 100%;
  padding: .5rem;
  background: white;
  border-radius: .25rem;
  box-shadow: var(--float-close);
  transform: translateY(-74px);
  margin-bottom: 0;
}

  .pet-details .img--container {
    --size: 25rem;
    --size-sm: calc(var(--size) / 3);
    --size-sm-w: calc(var(--size) / 2);
    --size-space: calc((var(--size) - var(--size-sm)) / 8);
    flex-wrap: wrap;
    justify-content: flex-end;
    width: var(--size);
    counter-reset: petCounter;
  }

    .pet-details .img--container img {
      width: 100%;
      object-fit: cover;
      object-position: top center;
    }

  .pet-details label {
    position: relative;
    overflow: hidden;
    align-content: center;
    justify-content: center;
    border: 3px solid transparent;
    cursor: pointer
  }


  .pet-details.female label:hover {
    border-color: deeppink;
  }

  .pet-details.male label:hover {
    border-color: var(--color-6);
  }

  .pet-details [type="radio"]:indeterminate ~ label:first-of-type,
  .pet-details [type="radio"]:nth-of-type(1):checked ~ label:nth-of-type(1),
  .pet-details [type="radio"]:nth-of-type(2):checked ~ label:nth-of-type(2),
  .pet-details [type="radio"]:nth-of-type(3):checked ~ label:nth-of-type(3) {
    order: -2;
    width: var(--size);
    height: var(--size);
    border-radius: .5rem;
  }

  .pet-details [type="radio"]:indeterminate ~ label:not(label:first-of-type),
  .pet-details [type="radio"]:nth-of-type(1):not(:checked, :indeterminate) ~ label:nth-of-type(1),
  .pet-details [type="radio"]:nth-of-type(2):not(:checked, :indeterminate) ~ label:nth-of-type(2),
  .pet-details [type="radio"]:nth-of-type(3):not(:checked, :indeterminate) ~ label:nth-of-type(3) {
    width: var(--size-sm-w);
    height: var(--size-sm);
    border-radius: .25rem;
  }

    .pet-details [type="radio"]:indeterminate ~ label:not(label:first-of-type) img,
    .pet-details [type="radio"]:nth-of-type(1):not(:checked, :indeterminate) ~ label:nth-of-type(1) img,
    .pet-details [type="radio"]:nth-of-type(2):not(:checked, :indeterminate) ~ label:nth-of-type(2) img,
    .pet-details [type="radio"]:nth-of-type(3):not(:checked, :indeterminate) ~ label:nth-of-type(3) img {
      filter: blur(.05rem) grayscale(85%) opacity(85%);
    }

  .pet-details [type="radio"]:nth-of-type(2):checked ~ label:nth-of-type(3),
  .pet-details [type="radio"]:nth-of-type(1):checked ~ label:nth-of-type(2),
  .pet-details [type="radio"]:nth-of-type(3):checked ~ label:nth-of-type(1) {
    order: 1;
  }

  .pet-details [type="radio"]:nth-of-type(2):checked ~ label:nth-of-type(1),
  .pet-details [type="radio"]:nth-of-type(1):checked ~ label:nth-of-type(3),
  .pet-details [type="radio"]:nth-of-type(3):checked ~ label:nth-of-type(2) {
    order: 2;
  }


  .pet-details .description {
    font-size: 14px;
    line-height: 1.2;
    padding: 1rem 3rem;
    background: var(--compare);
  }

  .pet-details .info-wrapper {
    flex-direction: column;
    margin-left: -3px;
    justify-content: space-between;
    padding-bottom: 1.25rem;
  }

  .pet-details .name {
    padding: 2rem 12rem 1rem 3rem;
    border-top-right-radius: var(--circle);
    font-size: 4rem;
    color: white;
    font-weight: 300;
    width: fit-content;
  }

  .pet-details.female :is(.call-to-action,.name) {
    background: DeepPink;
    color: white;
  }

  .pet-details.male :is(.call-to-action,.name) {
    background: var(--color-6);
    color: white;
  }

  .pet-details a {
    align-items: center;
    color: var(--contrast);
  }

  .pet-details .back:hover {
    color: var(--contrast);
  }

  .pet-details .pre-greeting {
    font-size: 2rem;
    font-weight: 200;
    padding-left: 3rem;
    margin: 3rem 0 1rem;
    letter-spacing: .5rem;
    text-transform: uppercase;
  }

  .pet-details .info-wrapper svg {
    margin: .25rem .5rem .25rem 0rem;
    stroke-width: 1.5;
  }

  .pet-details a + a {
    margin-left: .5rem;
    color: var(--contrast);
  }

  .pet-details .info-wrapper img {
    margin-right: 1rem;
    width: 20px;
  }

  .pet-details .info-wrapper :is(img,svg) ~ span {
    margin-right: 3rem;
    min-width: fit-content;
  }

  .pet-details .back,
  .pet-details .call-to-action {
    padding: .25rem 1rem;
    background: var(--compare);
    border-radius: .25rem;
  }


    .pet-details .back:hover,
    .pet-details .call-to-action:hover {
      outline: 1px solid var(--contrast-less);
      box-shadow: var(--concave-sm);
    }


  .pet-details .back {
    margin-right: .5rem;
  }


  .pet-details label::after {
    content: counter(petCounter);
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    border-radius: 2rem;
    background: white;
    height: 2rem;
    width: 2rem;
    align-content: center;
    justify-content: center;
    text-align: center;
    padding-top: 0.5rem;
  }


  .pet-details label {
    position: relative;
    overflow: hidden;
    align-content: center;
    justify-content: center;
    border: 3px solid transparent;
    cursor: pointer;
    counter-increment: petCounter;
  }


  .pet-details .info {
    flex-direction: column;
  }

    .pet-details .info > *,
  .pet-details .button-row {
    padding-left: 3rem;
  }

  .pet-details .basics {
    flex-wrap: wrap;
    margin: 1rem 0;
  }

    .pet-details .basics > div,
    .pet-details .basics > div {
      align-items: center;
    }

  .pet-details .label {
    font-weight: 600;
    margin: 1rem 0rem 0rem;
  }

  .pet-details .breed {
    margin: 1rem 0;
  }

  .pet-details .questions {
    margin: 1rem 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-top: 2px solid var(--compare);
    border-bottom: 2px solid var(--compare);
    flex-wrap: wrap;
  }

  .pet-details .questions span {
    min-width: fit-content;
  }
    .pet-details .questions svg {
      margin-left: .5rem;
      margin-right: 2rem;
    }

@media screen and (max-width: 600px) {
  .pet-details {
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
  }

  .pet-details .basics {
    padding-top: .5rem;
    margin: 0rem;
  }

    .pet-details .img--container,
    .pet-detials .info-wrapper {
      width: 100%;
    }

    .pet-details [type="radio"]:indeterminate ~ label:not(label:first-of-type),
    .pet-details [type="radio"]:nth-of-type(1):not(:checked, :indeterminate) ~ label:nth-of-type(1),
    .pet-details [type="radio"]:nth-of-type(2):not(:checked, :indeterminate) ~ label:nth-of-type(2),
    .pet-details [type="radio"]:nth-of-type(3):not(:checked, :indeterminate) ~ label:nth-of-type(3) {
      width: 50%;
      height: unset;
    }


    .pet-details .info-wrapper div[style] {
      flex-wrap: wrap;
    }

    .pet-details .info-wrapper span {
      margin: .5rem 0;
    }

    .pet-details [for*="photo"] {
      transition: all 0s !important;
    }

    .pet-details .name {
      padding: 1.5rem 1.5rem 1.5rem .5rem !important;
      width: 100%;
      font-size: 2rem;
    }

    .pet-details .info > *,
    .pet-details .button-row {
      padding: 0rem .5rem;
    }

    .pet-details .description {
      padding: 1rem .5rem;
      line-height: 1.5;
      margin-bottom: .5rem;
    }

    .pet-details .pre-greeting {
      padding-left: .5rem;
    }

    .pet-details .info-wrapper img ~ span {
      margin-right: 4rem;
    }
}