#rre-complete-guides {
width: 100%;
margin: 0;
padding: 42px 20px 46px;
background: #f3f8fc;
box-sizing: border-box;
}
#rre-complete-guides *,
#rre-complete-guides *::before,
#rre-complete-guides *::after {
box-sizing: border-box;
}
.rre-complete-guides__inner {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
.rre-complete-guides__head {
margin: 0 0 24px;
text-align: center;
}
.rre-complete-guides__head h2 {
margin: 0;
padding: 0;
color: #123f68;
font-size: 25px;
font-weight: 700;
line-height: 1.45;
}
.rre-complete-guides__head h2::after {
display: block;
width: 48px;
height: 4px;
margin: 11px auto 0;
border-radius: 3px;
background: #f58220;
content: "";
}
.rre-complete-guides__head p {
margin: 12px 0 0;
color: #5f6b76;
font-size: 14px;
line-height: 1.7;
}
.rre-complete-guides__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.rre-complete-guides__card {
display: flex;
min-width: 0;
min-height: 112px;
padding: 17px 16px;
flex-direction: column;
justify-content: center;
border: 1px solid #d7e3ec;
border-left: 4px solid #1f5b8f;
border-radius: 8px;
background: #fff;
box-shadow: 0 3px 12px rgba(18, 63, 104, .06);
color: #123f68 !important;
text-decoration: none !important;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.rre-complete-guides__card:hover,
.rre-complete-guides__card:focus {
border-color: #1f5b8f;
box-shadow: 0 6px 18px rgba(18, 63, 104, .12);
transform: translateY(-2px);
}
.rre-complete-guides__eyebrow {
display: block;
margin: 0 0 5px;
color: #d96513;
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
line-height: 1.3;
}
.rre-complete-guides__name {
display: block;
color: #123f68;
font-size: 17px;
font-weight: 700;
line-height: 1.45;
}
.rre-complete-guides__desc {
display: block;
margin-top: 5px;
color: #64717d;
font-size: 12px;
line-height: 1.55;
}
@media screen and (max-width: 900px) {
.rre-complete-guides__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 767px) {
#rre-complete-guides {
padding: 32px 15px 36px;
}
.rre-complete-guides__head {
margin-bottom: 20px;
}
.rre-complete-guides__head h2 {
font-size: 21px;
}
.rre-complete-guides__head p {
font-size: 13px;
}
.rre-complete-guides__grid {
gap: 10px;
}
.rre-complete-guides__card {
min-height: 108px;
padding: 13px 11px;
}
.rre-complete-guides__name {
font-size: 15px;
}
.rre-complete-guides__desc {
font-size: 11px;
}
}