boxes

by rami7250

HTML

<div class="eligibility-content-box">
                                <div class="item-box">
                                    


<h2 id="" class="headLine2">מידע חשוב</h2>



<p>בהתאם לחוזר משרד הבריאות, מתאריך 07.08.2022 הרשומה הרפואית הפסיכיאטרית ניתנת לצפייה על-ידי רופאי משפחה, ילדים, גניקולוגיה, התפתחות הילד וגריאטריה, לצורך מתן מענה רפואי מיטבי ומותאם אישית, תוך שמירה על בטיחות הטיפול. רשומות בתחום הפסיכולוגי לא ישותפו. לשם חסימת המידע הרפואי יש לפנות למזכירות המשרד במרכז הרפואי של מכבי.</p>





                                </div>
                                <div class="item-box">
                                    


<h2 id="" class="headLine2">מי זכאי?</h2>



<p>כל חבר או חברה רשאים לפנות להערכה פסיכיאטרית.</p>





                                </div>
                                <div class="item-box">
                                    


<h2 id="" class="headLine2">מה הזכאות?</h2>



<p>הערכה וטיפול פסיכיאטרי הכוללים אבחון, בדיקה של מצב החולה ,מתן הסבר על מהות הטיפול התרופתי ובדיקות מעבדה במידת הצורך.</p>





                                </div>
                                <div class="item-box">
                                    


<h2 id="" class="headLine2">כמה זה עולה?</h2>



<p>32 ₪ השתתפות עצמית רבעונית.</p>



<div class="divider"></div>        <div class="pinkLink"><a href="https://www.maccabi4u.co.il/443-he/Maccabi.aspx" target="_blank" title="מידע נוסף על פטורים והקלות לאוכלוסיות ייחודיות">מידע נוסף על פטורים והקלות לאוכלוסיות ייחודיות</a></div>






                                </div>
                                <div class="item-box">
                                    


<h2 id="" class="headLine2">איפה ניתן השירות?</h2>



<p>ההערכה מתבצעת על ידי רופאים פסיכיאטרים של מכבי.</p>



        <div class="pinkLink"><a href="https://serguide.maccabi4u.co.il/heb/doctors/?field=075%2C076" target="_blank" title="לאיתור רופא פסיכיאטרי במדריך השירותים">לאיתור רופא פסיכיאטרי במדריך השירותים</a></div>






          ...

CSS

.eligibility-content-box {padding:30px;}

@media screen and (max-width: 1199px) {
    .item-box:lang(he-IL) {
        padding: 20px 24px 21px 25px;
    }
}
@media (max-width: 1024px) and (min-width: 768px) {
    .item-box {
        width: 55%;
    }
}
@media screen and (max-width: 1199px) {
    .item-box {
        width: 87.25%;
        box-shadow: 0 4px 6px 0 rgba(13, 71, 161, .07);
        border: solid 1px rgba(195, 209, 226, .6);
        background-color: #fff;
        backdrop-filter: none;
        margin-bottom: 20px;
    }
}
.item-box {
    border-radius: 24px;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    box-shadow: 0 18px 40px 0 rgba(13, 71, 161, .08);
    border: solid 1px rgba(195, 209, 226, .6);
    background-color: rgba(255, 255, 255, .85);
    width: 950px;
    margin: 0 auto 32px;
    word-break: break-word;
    padding-block: 41px;
    padding-inline: 50px 71px;
}
*, ::after, ::before {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
body:lang(he-IL) {
    direction: rtl;
    text-align: right;
}
body {
    background-color: #ffffff;
    margin: 0;
    font-family: Heebo, sans-serif !important;
    text-align: right;
    direction: rtl;
    position: relative;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
   ...