/* Home gift boxes (common/home-gift.blade.php, both themes): shopping-for pills, upcoming holiday banner, shop-by cards.
   Mobile first; tablet >= 768px, PC >= 990px. Site font (Roboto); box 2 title uses a system serif stack (no web font).
   Holiday colors come from --hg-h-* set inline per holiday (config holiday_theme); site colors otherwise. */
.home-gift {
    --hg-primary: var(--pr-color-primary, #0b5179);
    --hg-title: #19124f;
    --hg-accent: var(--pr-color-secondary, #a7165c);
    --hg-text: var(--pr-color-darkness, #444);
    --hg-light: #f5f5f5;
    --hg-pink: #fde9ee;
    --hg-peach: #fdf0e3;
    --hg-mint: #e5f6ee;
    --hg-sky: #e6f0fd;
    --hg-lav: #efecfd;
    --hg-shadow: 0 1px 2px rgba(25, 18, 79, .05), 0 6px 16px -10px rgba(25, 18, 79, .25);
    font-family: var(--pr-font-family, 'Roboto', Helvetica, sans-serif);
}

/* chevron drawn with borders (no extra node) */
.home-gift-pill::after,
.home-gift-card-list a::after,
.home-gift-card > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
}

/* two-tone icons: first path = main color, second path = detail color */
.home-gift-ic path:first-child { fill: var(--hg-i1, #2e7d32); }
.home-gift-ic path + path { fill: var(--hg-i2, #c62828); }
.home-gift-ic-tree { --hg-i1: #15803d; --hg-i2: #e11d2e; }
.home-gift-ic-gift { --hg-i1: #f59e0b; --hg-i2: #dc2626; }
.home-gift-ic-heart { --hg-i1: #ef3b5c; --hg-i2: #ffd1da; }
.home-gift-ic-shirt { --hg-i1: #2563eb; --hg-i2: #1e3a8a; }
.home-gift-ic-people { --hg-i1: #15803d; --hg-i2: #4ade80; }
.home-gift-ic-friends { --hg-i1: #7c3aed; --hg-i2: #a78bfa; }
.home-gift-ic-tulip { --hg-i1: #e11d48; --hg-i2: #16a34a; }
.home-gift-ic-mug { --hg-i1: #2563eb; --hg-i2: #93c5fd; }
.home-gift-ic-pumpkin { --hg-i1: #f97316; --hg-i2: #15803d; }
.home-gift-ic-star { --hg-i1: #7c3aed; --hg-i2: #f59e0b; }

/* 1. What are you shopping for? */
.home-gift-title {
    margin: 0;
    text-align: center;
    color: var(--hg-title);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.home-gift-subtitle {
    margin: 6px auto 16px;
    max-width: 300px;
    text-align: center;
    color: var(--hg-text);
    font-size: 14px;
    line-height: 1.4;
}

.home-gift-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.home-gift-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 12px 0 10px;
    border: 1px solid rgba(25, 18, 79, .05);
    border-radius: 12px;
    background: var(--hg-pink);
    box-shadow: var(--hg-shadow);
    color: var(--hg-title);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    transition: box-shadow .2s ease-in-out, transform .2s ease-in-out;
}

.home-gift-pill:hover,
.home-gift-pill:focus-visible {
    color: var(--hg-title);
    box-shadow: 0 2px 4px rgba(25, 18, 79, .06), 0 10px 20px -10px rgba(25, 18, 79, .35);
    transform: translateY(-1px);
}

.home-gift-pill:nth-child(8n+2) { background: var(--hg-peach); }
.home-gift-pill:nth-child(8n+4) { background: var(--hg-sky); }
.home-gift-pill:nth-child(8n+5) { background: var(--hg-mint); }
.home-gift-pill:nth-child(8n+6) { background: var(--hg-lav); }
.home-gift-pill:nth-child(8n+8) { background: var(--hg-sky); }

.home-gift-ic {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
}

/* 2. Upcoming holiday */
.home-gift-holiday-card {
    --hg-h-accent: var(--hg-accent);
    --hg-h-heading: var(--hg-primary);
    --hg-h-cta: var(--hg-accent);
    --hg-h-cta-hover: #9e0c58;
    --hg-h-cta2: var(--hg-h-cta);
    --hg-h-cta-glow: rgba(0, 0, 0, .25);
    --hg-h-num: var(--hg-h-cta-hover);
    --hg-h-count-border: rgba(25, 18, 79, .07);
    --hg-h-bg1: #fff6ec;
    --hg-h-bg2: #ffeaf2;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(25, 18, 79, .05);
    border-radius: 16px;
    background: linear-gradient(115deg, var(--hg-h-bg1) 0%, var(--hg-h-bg1) 35%, var(--hg-h-bg2) 100%);
    box-shadow: var(--hg-shadow);
}

.home-gift-holiday-text {
    position: relative;
    z-index: 2;
    padding: 22px 16px 18px;
}

.home-gift-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: var(--hg-h-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    line-height: 1.4;
    text-transform: uppercase;
}

.home-gift-eyebrow::after {
    content: "";
    width: 32px;
    height: 1px;
    background: currentColor;
}

.home-gift-holiday-title {
    margin: 0 0 10px;
    color: var(--hg-h-heading);
    font-family: Georgia, Cambria, 'Times New Roman', serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.home-gift-accent {
    color: var(--hg-h-accent);
}

.home-gift-holiday-sub {
    margin: 0 0 16px;
    color: var(--hg-text);
    font-size: 15px;
    line-height: 1.5;
}

.home-gift-countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 16px;
}

.home-gift-countdown[hidden] {
    display: none;
}

.home-gift-countdown b {
    display: block;
    padding: 8px 2px 7px;
    border: 1px solid var(--hg-h-count-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    color: var(--hg-h-num);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.home-gift-countdown b::after {
    content: attr(data-l);
    display: block;
    color: #666;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
}

.home-gift-holiday-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 12px;
    background: var(--hg-h-cta2);
    background: linear-gradient(180deg, var(--hg-h-cta) 0%, var(--hg-h-cta2) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px var(--hg-h-cta-glow);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .15);
    transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.home-gift-holiday-cta::after {
    content: "\2192";
    font-size: 1.15em;
    line-height: 1;
}

.home-gift-holiday-cta:hover,
.home-gift-holiday-cta:focus-visible {
    background: var(--hg-h-cta-hover);
    background: linear-gradient(180deg, var(--hg-h-cta2) 0%, var(--hg-h-cta-hover) 100%);
    color: #fff;
}

.home-gift-holiday-more {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.2;
}

.home-gift-holiday-more a {
    padding: 6px 12px;
    color: var(--hg-h-heading);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-gift-holiday-more a + a {
    border-left: 1px solid rgba(25, 18, 79, .2);
}

.home-gift-holiday-more a:first-child {
    padding-left: 0;
}

.home-gift-holiday-more a:hover {
    color: var(--hg-h-accent);
}

/* banner: below the text on phones (16:10), background of the card from 768px */
.home-gift-banner-link,
.home-gift-banner-link picture {
    display: block;
}

.home-gift-banner {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 70% center;
    background: var(--hg-light);
}

/* no banner: 3 best seller images (1 big + 2 small stacked on its left), fixed ratio */
.home-gift-pics {
    display: grid;
    gap: 6px;
    margin: 0 16px 16px;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: var(--hg-shadow);
}

.home-gift-pics img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    background: #fff;
}

.home-gift-pics-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    aspect-ratio: 3 / 2;
}

.home-gift-pics-3 .home-gift-pic-1 { grid-column: 2; grid-row: 1 / span 2; }
.home-gift-pics-3 .home-gift-pic-2 { grid-column: 1; grid-row: 1; }
.home-gift-pics-3 .home-gift-pic-3 { grid-column: 1; grid-row: 2; }

.home-gift-pics-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    aspect-ratio: 2 / 1;
}

.home-gift-pics-1 {
    aspect-ratio: 1 / 1;
}

/* no banner, 'decor' fallback (PC theme only): festive SVG on the right, holiday colours, no image request */
.home-gift-decor {
    display: none;
}

.home-gift-decor svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.home-gift-d1 { fill: var(--hg-h-accent); opacity: .9; }
.home-gift-d2 { fill: var(--hg-h-heading); opacity: .85; }
.home-gift-d3 { fill: #fff; opacity: .55; }
.home-gift-d4 { fill: none; stroke: var(--hg-h-accent); stroke-width: 3; stroke-linecap: round; opacity: .35; }

/* 3. Shop by */
.home-gift-shopby {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.home-gift-card {
    --hg-card: var(--hg-sky);
    --hg-card-dk: #d4e5fb;
    --hg-card-ic: #2563eb;
    --hg-card-ic2: #60a5fa;
    --hg-card-txt: #1d4ed8;
    border: 1px solid rgba(25, 18, 79, .06);
    border-radius: 16px;
    background: var(--hg-card);
    box-shadow: var(--hg-shadow);
}

.home-gift-card-occasion { --hg-card: var(--hg-pink); --hg-card-dk: #fbd3dc; --hg-card-ic: #e11d2e; --hg-card-ic2: #f59e0b; --hg-card-txt: #c8102e; }
.home-gift-card-category { --hg-card: var(--hg-mint); --hg-card-dk: #c8ecd9; --hg-card-ic: #15803d; --hg-card-ic2: #065f46; --hg-card-txt: #15803d; }
.home-gift-card-interest { --hg-card: var(--hg-lav); --hg-card-dk: #dcd5fb; --hg-card-ic: #7c3aed; --hg-card-ic2: #f59e0b; --hg-card-txt: #6d28d9; }

.home-gift-card-ic {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 24px;
    height: 24px;
    padding: 9px;
    border-radius: 12px;
    background: var(--hg-card-dk);
}

.home-gift-card-ic path:first-child { fill: var(--hg-card-ic); }
.home-gift-card-ic path + path { fill: var(--hg-card-ic2); }

.home-gift-card-title {
    margin: 0;
    color: var(--hg-title);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.home-gift-card-list {
    margin: 0 10px;
    padding: 2px 12px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(25, 18, 79, .04);
}

.home-gift-card-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f3;
    color: #2b2b3a;
    font-size: 15px;
    line-height: 1.3;
}

.home-gift-card-list a:last-child {
    border-bottom: 0;
}

.home-gift-card-list a:hover,
.home-gift-card-list a:focus-visible {
    color: var(--hg-card-txt);
}

/* row thumbnail: letter circle with the image on top. The image paints the circle colour under itself (transparent PNG designs
   must not show the letter through); a failed image renders its ::before instead (the letter, no broken-image icon). */
.home-gift-thumb {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--hg-card);
    color: var(--hg-card-txt);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.home-gift-thumb-dark {
    color: #fff;
}

.home-gift-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    object-fit: cover;
}

.home-gift-thumb img::before {
    content: attr(data-l);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: inherit;
    color: inherit;
}

.home-gift-thumb img.home-gift-thumb-design {
    object-fit: contain;
    padding: 2px;
    box-sizing: border-box;
}

.home-gift-card-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    margin: 10px 10px 12px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--hg-card-dk);
    color: var(--hg-card-txt);
    font-size: 14px;
    font-weight: 500;
}

.home-gift-card-more::after {
    content: "\2192";
}

.home-gift-card-more:hover,
.home-gift-card-more:focus-visible {
    color: var(--hg-title);
}

/* mobile theme: closed details rows */
details.home-gift-card > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 8px 18px 8px 10px;
    color: var(--hg-title);
    cursor: pointer;
    list-style: none;
}

details.home-gift-card > summary::-webkit-details-marker {
    display: none;
}

details.home-gift-card[open] > summary::after {
    transform: rotate(135deg);
}

details.home-gift-card .home-gift-card-ic {
    width: 22px;
    height: 22px;
    padding: 8px;
}

/* PC theme card: icon | title / subtitle, then list and "View all" across */
div.home-gift-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    align-content: start;
}

div.home-gift-card > .home-gift-card-ic {
    grid-row: 1 / span 2;
    align-self: center;
    margin: 14px 0 12px 12px;
}

div.home-gift-card > .home-gift-card-title {
    align-self: end;
    padding-top: 14px;
}

div.home-gift-card > .home-gift-card-sub {
    align-self: start;
    margin: 2px 0 12px;
    color: #666;
    font-size: 13px;
    line-height: 1.3;
}

div.home-gift-card > .home-gift-card-list,
div.home-gift-card > .home-gift-card-more {
    grid-column: 1 / -1;
}

@media (min-width: 600px) {
    .home-gift-shopby {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

/* tablet */
@media (min-width: 768px) {
    .home-gift-title {
        font-size: 28px;
    }

    .home-gift-subtitle {
        max-width: none;
        margin: 8px auto 20px;
        font-size: 16px;
    }

    .home-gift-pills {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .home-gift-pill {
        gap: 14px;
        min-height: 60px;
        padding: 0 16px;
        font-size: 15px;
    }

    .home-gift-ic {
        width: 28px;
        height: 28px;
    }

    .home-gift-holiday-card {
        min-height: 400px;
        justify-content: center;
    }

    .home-gift-holiday-text {
        width: 62%;
        max-width: 560px;
        padding: 32px;
    }

    .home-gift-holiday-title {
        font-size: 38px;
    }

    .home-gift-holiday-sub {
        font-size: 16px;
    }

    .home-gift-countdown {
        grid-template-columns: repeat(4, 80px);
        gap: 8px;
    }

    .home-gift-countdown b {
        font-size: 28px;
    }

    .home-gift-countdown b::after {
        font-size: 12px;
    }

    .home-gift-holiday-cta {
        display: inline-flex;
        min-width: 296px;
        font-size: 18px;
    }

    .home-gift-holiday-more {
        justify-content: flex-start;
    }

    /* banner fills the card behind the text; the card colour fades out on the left so the text stays readable */
    .home-gift-has-banner::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(90deg, var(--hg-h-bg1) 0%, var(--hg-h-bg1) 45%, transparent 80%);
    }

    .home-gift-has-banner .home-gift-banner-link {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .home-gift-has-banner .home-gift-banner-link picture {
        width: 100%;
        height: 100%;
    }

    .home-gift-has-banner .home-gift-banner {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-position: right center;
    }

    /* no banner: text left, best seller images right */
    .home-gift-holiday-card:not(.home-gift-has-banner) {
        min-height: 0;
        flex-direction: row;
        align-items: center;
    }

    .home-gift-holiday-card:not(.home-gift-has-banner) .home-gift-holiday-text {
        width: 55%;
    }

    .home-gift-holiday-card:not(.home-gift-has-banner) .home-gift-pics {
        flex: 1 1 0;
        margin: 24px 24px 24px 0;
    }

    .home-gift-holiday-nopics .home-gift-holiday-text {
        width: 100%;
        max-width: none;
    }

    .home-gift-holiday-card.home-gift-has-decor {
        min-height: 360px;
        align-items: stretch;
    }

    .home-gift-has-decor .home-gift-holiday-text {
        align-self: center;
    }

    .home-gift-decor {
        position: relative;
        display: block;
        flex: 1 1 0;
        min-height: 240px;
        background: radial-gradient(circle at 55% 45%, rgba(255, 255, 255, .8) 0, rgba(255, 255, 255, 0) 55%),
            radial-gradient(circle at 90% 90%, var(--hg-h-bg2) 0, rgba(255, 255, 255, 0) 60%);
    }

    .home-gift-pics-1 {
        max-width: 420px;
    }
}

/* PC */
@media (min-width: 990px) {
    .home-gift-title {
        font-size: 32px;
    }

    .home-gift-pill {
        min-height: 64px;
        padding: 0 22px;
        font-size: 17px;
    }

    .home-gift-holiday-card {
        min-height: 420px;
    }

    .home-gift-holiday-text {
        width: 50%;
        padding: 40px 48px;
    }

    .home-gift-holiday-title {
        font-size: 48px;
    }

    .home-gift-holiday-sub {
        font-size: 17px;
    }

    .home-gift-has-banner::before {
        background: linear-gradient(90deg, var(--hg-h-bg1) 0%, var(--hg-h-bg1) 26%, transparent 46%);
    }

    /* lighter veil where color-mix() exists; older browsers keep the solid fallback above */
    @supports (background: color-mix(in srgb, red 50%, transparent)) {
        .home-gift-has-banner::before {
            background: linear-gradient(90deg, color-mix(in srgb, var(--hg-h-bg1) 92%, transparent) 0%,
                color-mix(in srgb, var(--hg-h-bg1) 78%, transparent) 30%, transparent 46%);
        }
    }

    .home-gift-holiday-card:not(.home-gift-has-banner) .home-gift-holiday-text {
        width: 50%;
    }

    .home-gift-holiday-card:not(.home-gift-has-banner) .home-gift-pics {
        margin: 32px 32px 32px 0;
    }

    .home-gift-holiday-card.home-gift-has-decor {
        min-height: 400px;
    }

    .home-gift-shopby {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* banner on narrower PC/tablet widths: the image starts at 36 % of the card (its empty left part is dropped) so the products
   stay right of the text; the card colour covers the first 38 % and fades out by 56 % */
@media (min-width: 768px) and (max-width: 1199px) {
    .home-gift-has-banner .home-gift-banner-link {
        left: 36%;
    }

    .home-gift-has-banner .home-gift-banner {
        object-position: 70% center;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
        mask-image: linear-gradient(90deg, transparent 0, #000 14%);
    }

    .home-gift-has-banner::before {
        background: linear-gradient(90deg, var(--hg-h-bg1) 0%, var(--hg-h-bg1) 36%, transparent 52%);
    }

    /* lighter veil where color-mix() exists; older browsers keep the solid fallback above */
    @supports (background: color-mix(in srgb, red 50%, transparent)) {
        .home-gift-has-banner::before {
            background: linear-gradient(90deg, color-mix(in srgb, var(--hg-h-bg1) 94%, transparent) 0%,
                color-mix(in srgb, var(--hg-h-bg1) 82%, transparent) 38%, transparent 52%);
        }
    }
}

@media (min-width: 990px) and (max-width: 1199px) {
    .home-gift-has-banner .home-gift-holiday-text {
        width: 48%;
    }

    .home-gift-has-banner .home-gift-holiday-title {
        font-size: 42px;
    }
}

@media (min-width: 768px) and (max-width: 989px) {
    .home-gift-has-banner .home-gift-banner-link {
        left: 42%;
    }

    .home-gift-has-banner::before {
        background: linear-gradient(90deg, var(--hg-h-bg1) 0%, var(--hg-h-bg1) 44%, transparent 60%);
    }

    /* lighter veil where color-mix() exists; older browsers keep the solid fallback above */
    @supports (background: color-mix(in srgb, red 50%, transparent)) {
        .home-gift-has-banner::before {
            background: linear-gradient(90deg, color-mix(in srgb, var(--hg-h-bg1) 94%, transparent) 0%,
                color-mix(in srgb, var(--hg-h-bg1) 84%, transparent) 46%, transparent 60%);
        }
    }

    .home-gift-has-banner .home-gift-holiday-text {
        width: 56%;
        padding-right: 16px;
    }

    .home-gift-has-banner .home-gift-holiday-title {
        font-size: 34px;
    }
}

/* phones with a portrait banner (both themes under 768px): the card background is the image, full width and anchored at the
   bottom (its light top fades into the card colour), the text sits on the top part with only a soft light veil; the bottom
   padding (= height of the products zone, ~45 % of a 3:4 image = 60 % of the width) keeps the products below the links */
@media (max-width: 767px) {
    .home-gift-banner-portrait {
        padding-bottom: 60%;
        background: var(--hg-h-bg1);
    }

    .home-gift-banner-portrait::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        height: 62%;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 250, 244, .55) 0%, rgba(255, 250, 244, .35) 60%, rgba(255, 250, 244, 0) 100%);
    }

    .home-gift-banner-portrait .home-gift-banner-link {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .home-gift-banner-portrait .home-gift-banner-link picture {
        width: 100%;
        height: 100%;
    }

    .home-gift-banner-portrait .home-gift-banner {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        object-position: center bottom;
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%);
        mask-image: linear-gradient(180deg, transparent 0, #000 18%);
    }

    .home-gift-banner-portrait .home-gift-holiday-text {
        padding-bottom: 6px;
    }
}