.promocare-precautions {
--pc-blue: #4388c8;
--pc-blue-dark: #1768ad;
--pc-light-blue: #edf6fd;
--pc-border: #cbdff0;
--pc-yellow: #f4c400;
--pc-text: #333333;
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin: 0 auto;
border: 2px solid var(--pc-border);
background: #ffffff;
color: var(--pc-text);
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.55;
overflow: hidden;
}
.promocare-precautions *,
.promocare-precautions *::before,
.promocare-precautions *::after {
box-sizing: border-box;
}
.promocare-precautions__header {
display: flex;
align-items: center;
min-height: 126px;
padding: 22px 42px;
background: var(--pc-blue);
border-left: 13px solid var(--pc-yellow);
color: #ffffff;
}
.promocare-precautions__header-icon {
flex: 0 0 68px;
width: 68px;
height: 68px;
margin-right: 25px;
}
.promocare-precautions__header-icon svg {
display: block;
width: 100%;
height: 100%;
}
.promocare-precautions__header h2 {
margin: 0;
padding: 0;
color: #ffffff;
font-size: clamp(32px, 3.2vw, 48px);
font-weight: 700;
line-height: 1;
letter-spacing: .2px;
}
.promocare-precautions__body {
padding: 46px 54px 42px;
}
.promocare-precautions__item {
display: grid;
grid-template-columns: 70px minmax(0, 1fr);
column-gap: 30px;
align-items: start;
}
.promocare-precautions__check {
width: 58px;
height: 58px;
color: var(--pc-blue);
}
.promocare-precautions__check svg {
display: block;
width: 100%;
height: 100%;
}
.promocare-precautions__item p {
margin: -2px 0 0;
padding: 0;
font-size: clamp(21px, 2.05vw, 31px);
font-weight: 400;
line-height: 1.52;
letter-spacing: -.2px;
}
.promocare-precautions__divider {
height: 2px;
margin: 36px 0 36px;
border-top: 2px dashed #c9e1f5;
}
.promocare-precautions__important {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
column-gap: 24px;
align-items: center;
margin-top: 36px;
padding: 30px 30px 29px;
border-left: 11px solid var(--pc-yellow);
border-radius: 8px;
background: var(--pc-light-blue);
color: var(--pc-blue-dark);
}
.promocare-precautions__important-icon {
width: 60px;
height: 60px;
color: #347fc1;
}
.promocare-precautions__important-icon svg {
display: block;
width: 100%;
height: 100%;
}
.promocare-precautions__important p {
margin: 0;
padding: 0;
font-size: clamp(20px, 1.9vw, 29px);
font-weight: 400;
line-height: 1.62;
letter-spacing: -.2px;
}
.promocare-precautions__important strong {
font-weight: 700;
}
@media (max-width: 900px) {
.promocare-precautions__header {
min-height: 105px;
padding: 20px 30px;
border-left-width: 10px;
}
.promocare-precautions__header-icon {
flex-basis: 58px;
width: 58px;
height: 58px;
margin-right: 20px;
}
.promocare-precautions__body {
padding: 35px 32px;
}
.promocare-precautions__item {
grid-template-columns: 58px minmax(0, 1fr);
column-gap: 22px;
}
.promocare-precautions__check {
width: 52px;
height: 52px;
}
.promocare-precautions__important {
grid-template-columns: 58px minmax(0, 1fr);
column-gap: 18px;
padding: 24px 22px;
border-left-width: 9px;
}
}
@media (max-width: 600px) {
.promocare-precautions {
border-width: 1px;
}
.promocare-precautions__header {
min-height: 82px;
padding: 17px 20px;
border-left-width: 8px;
}
.promocare-precautions__header-icon {
flex-basis: 46px;
width: 46px;
height: 46px;
margin-right: 14px;
}
.promocare-precautions__header h2 {
font-size: 29px;
}
.promocare-precautions__body {
padding: 28px 20px 24px;
}
.promocare-precautions__item {
grid-template-columns: 45px minmax(0, 1fr);
column-gap: 15px;
}
.promocare-precautions__check {
width: 44px;
height: 44px;
}
.promocare-precautions__item p {
font-size: 18px;
line-height: 1.55;
letter-spacing: 0;
}
.promocare-precautions__divider {
margin: 25px 0;
}
.promocare-precautions__important {
grid-template-columns: 45px minmax(0, 1fr);
column-gap: 14px;
margin-top: 26px;
padding: 20px 15px 20px 14px;
border-left-width: 7px;
border-radius: 6px;
}
.promocare-precautions__important-icon {
width: 42px;
height: 42px;
}
.promocare-precautions__important p {
font-size: 17px;
line-height: 1.55;
letter-spacing: 0;
}
}