/* Final positioning adjustments for the home category cards and account artwork. */

/*
 * Category titles belong in the free upper part of each card. The base design
 * used margin-top:auto, which forced them down onto the illustrations.
 */
.categories-section .category-card > div {
    position: relative;
    z-index: 3;
    display: block;
    width: min(62%, 320px);
    min-height: 0;
    height: auto;
    padding-bottom: 0;
}

.categories-section .category-card > div > span {
    display: block;
}

.categories-section .category-card h3 {
    margin: clamp(26px, 2.1vw, 38px) 0 9px;
    max-width: 100%;
    font-size: clamp(1.8rem, 2.25vw, 2.45rem);
    line-height: .96;
    text-wrap: balance;
}

.categories-section .category-card p {
    max-width: 330px;
}

.categories-section .category-card img {
    z-index: 1;
    right: -10%;
    bottom: -18%;
    width: 62%;
    height: 72%;
}

.categories-section .category-card--large > div {
    width: min(72%, 540px);
}

.categories-section .category-card--large h3 {
    margin-top: clamp(58px, 4.8vw, 82px);
    font-size: clamp(3.25rem, 4.25vw, 4.55rem);
    line-height: .94;
}

.categories-section .category-card--large p {
    max-width: 390px;
}

.categories-section .category-card--large img {
    right: -12%;
    bottom: -11%;
    width: 68%;
    height: 64%;
}

/* Place the white account quote in the open central area, not at the bottom. */
.page-account .account-art blockquote {
    top: clamp(175px, 22vh, 245px);
    right: 70px;
    bottom: auto;
    left: 55px;
    max-width: 760px;
}

@media (max-width: 1180px) and (min-width: 901px) {
    .categories-section .category-card > div {
        width: min(64%, 310px);
    }

    .categories-section .category-card--large > div {
        width: 66%;
    }

    .categories-section .category-card h3 {
        margin-top: 24px;
        font-size: clamp(1.7rem, 2.7vw, 2.35rem);
    }

    .categories-section .category-card--large h3 {
        margin-top: 48px;
        font-size: clamp(3rem, 5vw, 4.2rem);
    }
}

@media (max-width: 900px) {
    .categories-section .category-card > div,
    .categories-section .category-card--large > div {
        width: 64%;
    }

    .categories-section .category-card h3,
    .categories-section .category-card--large h3 {
        margin-top: 30px;
    }

    .categories-section .category-card img,
    .categories-section .category-card--large img {
        right: -10%;
        bottom: -13%;
        width: 66%;
        height: 67%;
    }

    .page-account .account-art blockquote {
        top: auto;
        right: 35px;
        bottom: 58px;
        left: 35px;
    }
}

@media (max-width: 680px) {
    .categories-section .category-card > div,
    .categories-section .category-card--large > div {
        width: 72%;
    }

    .categories-section .category-card h3,
    .categories-section .category-card--large h3 {
        margin-top: 28px;
    }

    .categories-section .category-card h3 {
        font-size: 2rem;
    }

    .categories-section .category-card--large h3 {
        font-size: 2.75rem;
    }
}