/* ONLY INTENDED FOR EXACTLY 4 BLOCKS */
.home-blocks {
    display: grid;
    grid-template-columns: 3fr 1fr 3fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a b b"
                         "c c d";
    gap: clamp(1rem, 4vw, 2rem);
    max-width: 50rem;
    aspect-ratio: 1;
}
.home-block {
    position: relative;
}
.home-block:nth-child(1) {
    grid-area: a;
}
.home-block:nth-child(2) {
    grid-area: b;
}
.home-block:nth-child(3) {
    grid-area: c;
}
.home-block:nth-child(4) {
    grid-area: d;
}
.home-block-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    max-width: 100%;
    height: 100%;
    padding: 1.5rem;
    color: var(--color-text-home-block-content);
    text-decoration: none;
    box-shadow: 0 0 clamp(0.5rem, 2vw, 1rem) clamp(0.375rem, 1.5vw, 0.75rem) var(--color-shadow-content);
}
.home-blocks-container h2 {
    color: var(--color-text-home-block-heading);
}
.home-block hr {
    width: min(100%, 10rem);
    margin-inline: calc((100% - min(100%, 10rem))/2);
    height: 0.125em;
    background: var(--color-bg-home-block-detail);
}
@property --grad-color-1 {
    syntax: "<color>";
    inherits: false;
    initial-value: #ffffff00;
}
@property --grad-color-2 {
    syntax: "<color>";
    inherits: false;
    initial-value: #ffffff00;
}
.home-block-content::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    --grad-color-1: var(--color-bg-home-block-inner-1-hover);
    --grad-color-2: var(--color-bg-home-block-outer-1-hover);
    background: radial-gradient(circle, var(--grad-color-1), var(--grad-color-2));
}
.home-block:nth-child(2) .home-block-content::before, .home-block:nth-child(3) .home-block-content::before {
    --grad-color-1: var(--color-bg-home-block-inner-2-hover);
    --grad-color-2: var(--color-bg-home-block-outer-2-hover);
}
.home-block:nth-child(2) .home-block-content, .home-block:nth-child(3) .home-block-content {
    height: 75%;
}
.home-block:nth-child(2) .home-block-content {
    top: 25%;
}
.home-block h2 {
    font-family: "Oswald", "DM Sans", "Helvetica", sans-serif;
    font-weight: 300;
    font-size: 1.25rem;
    text-wrap: balance;
    text-align: center;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    width: 100%;
}
.home-block p {
    line-height: 1.625;
    margin-top: 0.75rem;
}
.block-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    filter: brightness(150%), contrast(80%), blur(10px);
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .home-block-content {
        transition: scale 400ms ease-in-out;
    }
    .home-block-content:hover,
    .home-block-content:focus-visible {
        scale: 1.05;
    }
    .home-block-content::before {
        transition: --grad-color-1 400ms ease-in-out, --grad-color-2 400ms ease-in-out;
    }
    .home-block-content::before {
        --grad-color-1: var(--color-bg-home-block-inner-1);
        --grad-color-2: var(--color-bg-home-block-outer-1);
    }
    .home-block-content:hover::before,
    .home-block-content:focus-visible::before {
        --grad-color-1: var(--color-bg-home-block-inner-1-hover);
        --grad-color-2: var(--color-bg-home-block-outer-1-hover);
    }
    .home-block:nth-child(2) .home-block-content::before,
    .home-block:nth-child(3) .home-block-content::before {
        --grad-color-1: var(--color-bg-home-block-inner-2);
        --grad-color-2: var(--color-bg-home-block-outer-2);
    }
    .home-block:nth-child(2) .home-block-content:hover::before,
    .home-block:nth-child(3) .home-block-content:hover::before,
    .home-block:nth-child(2) .home-block-content:focus-visible::before,
    .home-block:nth-child(3) .home-block-content:focus-visible::before {
        --grad-color-1: var(--color-bg-home-block-inner-2-hover);
        --grad-color-2: var(--color-bg-home-block-outer-2-hover);
    }
}

@media (max-width: 800px) {
    .home-blocks-container {
        margin-inline: 0;
    }
    .home-blocks {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        grid-template-areas: "a"
                             "b"
                             "c"
                             "d";
        aspect-ratio: unset;
        width: 100%;
    }
    .home-block {
        max-width: 25rem;
        justify-self: start;
    }
    .home-block:nth-child(2), .home-block:nth-child(4) {    
        justify-self: end;
    }
    .home-block:nth-child(2) .home-block-content, .home-block:nth-child(3) .home-block-content {    
        height: 100%;
    }
    .home-block:nth-child(2) .home-block-content {    
        top: 0;
    }
    .home-block-content {
        padding: 2.5rem 1.5rem;
    }
    .home-block:nth-child(1) .home-block-content::before,
    .home-block:nth-child(3) .home-block-content::before {
        --grad-color-1: var(--color-bg-home-block-inner-1-hover);
        --grad-color-2: var(--color-bg-home-block-outer-1-hover);
    }
    .home-block:nth-child(2) .home-block-content::before,
    .home-block:nth-child(4) .home-block-content::before {
        --grad-color-1: var(--color-bg-home-block-inner-2-hover);
        --grad-color-2: var(--color-bg-home-block-outer-2-hover);
    }
}

@media (max-width: 800px) and (prefers-reduced-motion: no-preference) and (hover: hover) {
    .home-block:nth-child(1) .home-block-content::before, .home-block:nth-child(3) .home-block-content::before {
        --grad-color-1: var(--color-bg-home-block-inner-1);
        --grad-color-2: var(--color-bg-home-block-outer-1);
    }
    .home-block:nth-child(1) .home-block-content:hover::before,
    .home-block:nth-child(3) .home-block-content:hover::before,
    .home-block:nth-child(1) .home-block-content:focus-visible::before,
    .home-block:nth-child(3) .home-block-content:focus-visible::before {
        --grad-color-1: var(--color-bg-home-block-inner-1-hover);
        --grad-color-2: var(--color-bg-home-block-outer-1-hover);
    }
    .home-block:nth-child(2) .home-block-content::before, .home-block:nth-child(4) .home-block-content::before {
        --grad-color-1: var(--color-bg-home-block-inner-2);
        --grad-color-2: var(--color-bg-home-block-outer-2);
    }
    .home-block:nth-child(2) .home-block-content:hover::before,
    .home-block:nth-child(4) .home-block-content:hover::before,
    .home-block:nth-child(2) .home-block-content:focus-visible::before,
    .home-block:nth-child(4) .home-block-content:focus-visible::before {
        --grad-color-1: var(--color-bg-home-block-inner-2-hover);
        --grad-color-2: var(--color-bg-home-block-outer-2-hover);
    }
}