.community-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    grid-template-rows: 260px 260px;
    gap: 16px;
}
#communities.section{
    padding-top: 0;
}
.community-card {
    position: relative;
    overflow: hidden;
}
.community-card.large {
    grid-row: 1/3;
}
.community-card:after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(transparent, rgba(6, 18, 15, 0.72));
}
.community-card img {
    transition: transform 0.8s;
}
.community-card:hover img {
    transform: scale(1.04);
}
.community-card span {
    position: absolute;
    z-index: 2;
    left: 27px;
    right: 27px;
    bottom: 24px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: end;
}
.community-card strong {
    font: 400 27px "Manrope";
}
.community-card small {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    display: flex;
    gap: 10px;
}
.area-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 16px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.area-links a, .area-links a:nth-child(n+2) {
    padding-left: 25px;
    padding-right: 25px;
}
.area-links a {
    display: flex !important;
    align-items: center;
    gap: 5px;
    padding-block: 22px;
    border-right: 1px solid var(--line);
    font-size: 15px;
    color: #000;
    outline: 0;
}
.area-links a:hover{
    color:#061b38;
}
@media (max-width: 1365px) {
    .community-grid {
        grid-template-columns: 0.95fr 0.65fr;
    }
}
@media (max-width: 1199px) {
    .community-card span {
        left: 20px;
        right: 20px;
        bottom: 20px;
        align-items: center;
    }
    .community-card strong {
        font: 400 25px "Manrope";
    }
    .section-heading > p {
        margin-bottom: 3px;
        font-size: 15px;
        line-height: 22px;
    }
    #communities p.eyebrow {
        margin-bottom: 6px;
    }
}
@media (max-width: 1199px) {
    .section-heading {  
        grid-template-columns: 1fr;
    }
    #communities p.eyebrow {
        margin-bottom: 10px;
    }
    #communities .section-heading h2 {
        margin-bottom: 15px;
    }
}
@media (max-width: 900px) {
    .community-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 260px 260px 260px;
    }
    .community-card.large {
        grid-row: auto;
    }
}
@media (max-width: 600px) {
    .community-grid {
        grid-template-rows: 250px 250px 250px;
    }
    .area-links {
        grid-template-columns: 1fr;
    }
    .area-links a {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding-left: 0 !important;
    }
    .area-links{margin-top:12px;border:1px solid var(--line)}
    .area-links a,.area-links a:nth-child(n+2){padding:19px 18px!important;border-right:0;border-bottom:1px solid var(--line)}
    .area-links a:last-child{border-bottom:0}
    .area-links a, .area-links a:nth-child(n+2) {padding: 14px 18px !important;}
}
@media (max-width: 479px) {
    .community-card small {
        margin-top: 5px;
    }
    .community-card strong {
        font: 400 22px "Manrope";
    }
    .community-card span {
        left: 15px;
        right: 15px;
        bottom: 15px;
    }
}
@media (max-width: 375px) {
    #communities .section-heading h2 {
        margin-bottom: 4px;
        font-size: 26px;
    }
    .section-heading {
        margin-bottom: 25px;
    }
    .community-card span {
        align-items: start;
        flex-direction: column;
        gap: 5px;
    }
    .community-card strong {
        font: 400 22px "Manrope";
    }
    .community-card small {
        font-size: 12px;
    }
 
}