/* Load the shared stylesheet before the page stylesheet. */

.surr-benefit-grid,.surr-why-grid {
display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    width:100%;
}

.benefit,.surr-benefit-grid article,.surr-why-grid article {
border:1px solid var(--line);
    border-radius:var(--radius-md);
    text-align:center;
    padding:16px 12px;
    box-shadow:var(--shadow-sm);
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:0;
}

.benefit img,.surr-benefit-grid article img,.surr-why-grid img {
width:48px;
    height:48px;
    margin-bottom:8px;
}

.benefit h3,.surr-benefit-grid article h3,.surr-why-grid h3 {
font-size:14px;
    font-weight:800;
    line-height:1.35;
    margin:0 0 6px;
    color:var(--navy);
}

.surr-benefit-grid article p,.surr-why-grid article p {
font-size:12.5px;
    line-height:1.55;
    color:var(--text);
    margin:0;
}

.surr-package-grid {
display:grid;
    grid-template-columns:1fr;
    gap:20px;
    width:100%;
}

@media(max-width:480px) {
.surr-benefit-grid,.surr-why-grid {
grid-template-columns:1fr;
    gap:12px;
}
}

@media(min-width:768px) {
.surr-benefit-grid,.surr-why-grid {
grid-template-columns:repeat(4,1fr);
    gap:16px;
}
}

@media(min-width:768px) {
.benefit h3,.surr-benefit-grid article h3,.surr-why-grid h3 {
font-size:14.5px;
}
}

@media(min-width:768px) {
.surr-benefit-grid article p,.surr-why-grid article p {
font-size:13px;
}
}

@media(min-width:768px) {
.surr-package-grid {
grid-template-columns:repeat(3,1fr);
    gap:16px;
}
}

@media(min-width:1024px) {
.surr-package-grid {
gap:24px;
}
}