@charset "utf-8";
/* CSS Document */


@import url(
    'https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600&family=Yellowtail&display=swap'
);


#mfnb-neighbor-section {
    /*Very light warm background matching the reference.*/
    background:#fffafa;

    /*Gives the section its vertical breathing room.*/
    padding:12px 20px;

    /*Prevents horizontal overflow.*/
    box-sizing:border-box;
}


.mfnb-container {
    /*Three-column layout:IMAGE | STORY | VALUES*/
    display: grid;
    grid-template-columns:
        1.05fr
        1.15fr
        .75fr;

    /*Space between the three areas. */
    gap:20px;

    /*Maximum width keeps the section from becomingexcessively stretched on very large monitors.*/
    max-width:1200px;
    margin:0 auto;

    /*Align everything vertically in the middle.*/
    align-items:center;
}


#mfnb-photo-area {
    /*Image dimensions.*/
    width:100%;
    aspect-ratio:
        1.72 / 1;

    /*Rounded corners matching the reference.*/
    border-radius:4px;

    /*Anything extending outside the image stays hidden.*/
    overflow:hidden;
}


/* IMG*/

.mfnb-real-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}


#mfnb-story {
    /*Prevents content from becoming too wide.*/
    max-width:430px;
}

.mfnb-heading {
    /*Remove browser default margin.*/
    margin:0 0 14px;
    /*Serif display font.*/
    font-family:"DM Serif Display",Georgia,"Times New Roman",serif;
    /*Responsive sizing.*/
    font-size:clamp(24px, 2.3vw, 31px);

    /*Tight heading appearance.*/
    line-height:1.05;
    font-weight:400;
    color:#111;
    /*Keep heading and icon on the same line.*/
  /*  display:flex;
    align-items:center;
    gap:10px;*/
}



.mfnb-heading-decoration {

    /*Prevents the icon from shrinking.*/
    flex: 0 0 auto;
    display:inline-flex;
    width:30px;
    height:30px;
}

/* Heading decoration SVG */

.mfnb-heading-decoration svg {

    width:100%;
    height:100%;
    fill:none;
    stroke:#f51d61;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}


.mfnb-description {

    margin:0;
    color:#151515;
    font-family:Inter,Arial,sans-serif;
    font-size:13px;
    line-height:1.55;
    font-weight:400;
}


.mfnb-thank-you {

    margin-top:13px;
    /*Handwritten font.*/
    font-family:"Yellowtail",cursive;
    color:#f51d61;
    font-size:clamp(24px, 2.4vw, 30px);
    line-height:1.1;

}


.mfnb-signature {

    display:flex;
    align-items:center;
    gap:9px;
    margin-top:11px;
    color:#777;
    font-family:Inter,Arial,sans-serif;
    font-size:14px;
}

/* Small line before signature */

.mfnb-signature-line {

    width:13px;
    height:1px;
    background:#999;
    flex:0 0 auto;
}


#mfnb-values {

    /*Vertical list of the three selling points.*/
    display:flex;
    flex-direction:column;
    /*Divider appears between story and values.*/
    border-left:1px solid #eadfe1;
    padding-left:20px;
}


.mfnb-value {

    /*Each value consists of:ICON | TEXT*/
    display:flex;
    align-items:center;
    gap:15px;
    /*Vertical spacing.*/
    padding:12px 0;
}


.mfnb-value-icon {

    /*Fixed icon area.*/
    width:38px;
    height:42px;
    flex:0 0 38px;
    display:flex;
    align-items:center;
    justify-content:center;
}


.mfnb-value-icon svg {

    width:100%;
    height:100%;
    fill:none;
    stroke:#f51d61;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}


.mfnb-value-text {

    color:#111;
    font-family:Inter,Arial,sans-serif;
    font-size:12px;
    line-height:1.55;
    font-weight:500;
}


.mfnb-value {
    transition:transform .2s ease;
}


.mfnb-value:hover {
    transform:translateX(3px);
}



@media (max-width: 900px) {

    #mfnb-neighbor-section {
        padding:20px;
    }

    .mfnb-container {

        /*Image gets more space while the values column becomes slightly narrower.*/
        grid-template-columns:1fr 1fr;
        gap:25px;
    }

    #mfnb-photo-area {
        grid-column:1;
    }

    #mfnb-story {
        grid-column:2;
    }

    #mfnb-values {

        /*Values span the entire width below the image/story content.*/
        grid-column:1 / -1;
        border-left:none;
        border-top:1px solid #eadfe1;
        padding:18px 0 0;
        display: grid;
        grid-template-columns:repeat(3, 1fr);
        gap:15px;
    }

    .mfnb-value {
        padding:0 10px;
		
    }
	
	.mfnb-value-text { width:85%; font-size:18px; }

    .mfnb-value + .mfnb-value {
        border-left:1px solid #eadfe1;
    }

}



@media (max-width: 650px) {

    #mfnb-neighbor-section {
        padding:20px 15px;
    }

    .mfnb-container {
        /*Everything becomes one column.*/
        display:flex;
        flex-direction:column;
        gap:22px;
    }



    #mfnb-photo-area {
        width:100%;
        aspect-ratio:1.5 / 1;
    }



    #mfnb-story {
        max-width:none;
        width:100%;
    }

    .mfnb-heading {
        font-size:28px;
    }


    .mfnb-description {
        font-size:14px;
        line-height:1.6;
    }

    .mfnb-thank-you {
        font-size:28px;
    }


    #mfnb-values {
        width:100%;
        display:flex;
        flex-direction:column;
        gap: 0;
        border-top:1px solid #eadfe1;
        border-left:none;
        padding:8px 0 0;

		
    }

    .mfnb-value {
        padding:13px 5px;
    }

    .mfnb-value + .mfnb-value {
        border-left: none;
        border-top:1px solid #eadfe1;
    }

    .mfnb-value-icon {
        width:40px;
        height:42px;
        flex-basis:40px;
    }

    .mfnb-value-text {
        font-size:23px;
    }

}


@media (max-width: 400px) {

    .mfnb-heading {
        font-size:25px;
    }

    .mfnb-heading-decoration {
        width:25px;
        height:25px;
    }

    .mfnb-thank-you {
        font-size:25px;
    }

}