/* Homepage pet photography and focal-point corrections. */

/* The visible hero is one friendly dog-and-cat pair rendered as a CSS image. */
.kc-ref-hero__visual {
    contain: layout paint;
}

.kc-ref-hero__visual::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    width: 90%;
    height: 92%;
    border-radius: 44% 56% 31% 35% / 42% 45% 28% 32%;
    background-color: rgba(255, 250, 244, .9);
    background-image: url("https://images.pexels.com/photos/16440218/pexels-photo-16440218.jpeg?auto=compress&cs=tinysrgb&w=1400");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    filter: saturate(1.02) contrast(.99) brightness(1.02);
    box-shadow: 0 20px 44px rgba(66, 47, 35, .08);
}

/* Keep the pastel blobs visible around the photograph. */
.kc-ref-blob--peach {
    top: 14px;
    left: 0;
    width: 74%;
    height: 74%;
}

.kc-ref-blob--mint {
    left: -4%;
    bottom: -1%;
    width: 67%;
    height: 45%;
}

.kc-ref-blob--lavender {
    right: -3%;
    bottom: -4%;
    width: 66%;
    height: 50%;
}

/* Reserve stable geometry for all below-fold photography. */
.kc-ref-feature img,
.kc-ref-article > img,
.kc-ref-hub img,
.kc-ref-seasonal__photo img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.kc-ref-feature--tip img,
.kc-ref-feature--newsletter img {
    aspect-ratio: 4 / 3;
}

.kc-ref-article > img {
    aspect-ratio: 16 / 10;
}

.kc-ref-hub img {
    aspect-ratio: 4 / 5;
}

.kc-ref-seasonal__photo img {
    aspect-ratio: 5 / 4;
}

/* Feature photography: keep faces and the useful scene in view. */
.kc-ref-feature--tip img {
    object-position: 52% 28%;
}

.kc-ref-feature--newsletter img {
    object-position: 50% 24%;
}

/* Per-card focal points for the popular-content row. */
.kc-ref-article:nth-child(1) > img {
    object-position: 50% 18%;
}

.kc-ref-article:nth-child(2) > img {
    object-position: 50% 78%;
}

.kc-ref-article:nth-child(3) > img {
    object-position: 68% 46%;
}

.kc-ref-article:nth-child(4) > img {
    object-position: 50% 58%;
}

.kc-ref-article:nth-child(5) > img {
    object-position: 50% 28%;
}

@media (max-width: 1100px) {
    .kc-ref-hero__visual::after {
        right: 1%;
        width: 94%;
        height: 88%;
        background-position: center bottom;
        background-size: contain;
    }
}

@media (max-width: 780px) {
    .kc-ref-hero__visual::after {
        right: 3%;
        bottom: 0;
        width: 94%;
        height: 94%;
        border-radius: 38px;
        background-position: center bottom;
        background-size: contain;
    }

    .kc-ref-article > img {
        height: 190px;
        aspect-ratio: auto;
    }
}