.homepage-section{
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 100%;
        margin: 0 auto;
}
.feature-card{
    display:grid;
    grid-template-columns:minmax(280px,400px) 1fr;
    align-items:center;
    gap:3rem;
    padding:2rem;
    background: #262322;
    color:#F2E5D7;
    text-decoration:none;
    border-radius:36px;
    width: min(1100px, 100%);
    margin: 0 auto;
    transition:
        transform .35s ease,
        box-shadow .35s ease;

    position: relative;
    overflow: visible;
}
.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}



.card-image{
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:24px;
    background:#3D3834;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;

}
.feature-card:hover .card-image img:hover{
    transform:scale(1.05);
}



.card-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
}


.card-label{
    margin:0;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#BEB1A4;
}


.card-title{
    margin:.4rem 0 1rem;
    font-size:clamp(2.5rem,4vw,4rem);
    line-height:.95;
    font-weight:700;
    transition: ease .35s;
}


.card-description{
    margin:0;
    max-width:36ch;
    font-size:1rem;
    line-height:1.7;
    color:#D7CCC0;
}


.card-link{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    margin-top:2rem;
    font-weight:700;
    color:#F2E5D7;
    transition:gap .3s ease;
}
.card-link:hover{
    color: #7C886D;
    text-decoration: underline;
    transition: ease .35s;
    cursor: pointer;
}

.feature-card:hover .card-link{
    gap:.9rem;

}
.feature-card:hover .arrow{
    transform:translateX(8px);
}
.feature-card,
.feature-card:visited,
.feature-card:hover,
.feature-card:active {
    text-decoration: none;
}
.feature-card,
.majorlink_button{
    position:relative;
    z-index:1;
}

.majorlink_button {
    display: block;
    padding: 2rem;
    background: #262322;
    color: #F2E5D7;
    text-decoration: none;
    border-radius: 36px;
    width: min(800px, 100%);
    margin: 1.5rem auto 3.5rem;
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        color .35s ease;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
}

.majorlink_button:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
    color: #7C886D;
    text-decoration: underline;
    cursor: pointer;
}

.section-bg {
    position: absolute;

    width: 2200px;
    height: 1400px;

    left: 0;
    top: 0;

    transform: translate(-50%, -50%);

    pointer-events: none;
    z-index: -1;

    opacity: 0;

    filter:
        blur(90px)
        saturate(.8)
        brightness(.75);

    -webkit-mask-image: radial-gradient(
        ellipse 55% 50% at center,
        black 0%,
        black 30%,
        rgba(0,0,0,.65) 60%,
        rgba(0,0,0,.2) 80%,
        transparent 100%
    );

    mask-image: radial-gradient(
        ellipse 55% 50% at center,
        black 0%,
        black 30%,
        rgba(0,0,0,.65) 60%,
        rgba(0,0,0,.2) 80%,
        transparent 100%
    );

    transition: 
        opacity .35s ease;
}


.section-bg::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;

    transition: opacity .25s ease;
}


.feature-card,
.majorlink_button {
    position: relative;
    z-index: 1;
}