﻿@media all {
    /* override */
    .brand_divider_blue_white { background-position:center top 90px; }
        
    /* how_intro */
    #how_intro { position:relative; text-align:center; }
    #how_intro::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100px;  background: var(--color-blue); }

    #how_intro h1 { padding-top:var(--spacing-3L); }

    #how_intro .how_group { margin-top:var(--spacing-3L); grid-template-columns:repeat(4, 1fr); gap:var(--spacing-1L); }
    #how_intro .how_group > div { border:1px var(--color-dark-gray) solid; border-radius:30px; }
    #how_intro .how_group > div > .body { padding:var(--spacing-2L) var(--spacing-1L); background-color:var(--color-white); border-radius:30px; }

    #how_intro .how_group img { height:var(--spacing-4L); margin:0px auto var(--spacing-0) auto; }
    #how_intro .how_group .step { margin-bottom:var(--spacing-1S); color:var(--color-blue); font-size:var(--font-size-1S); font-weight:var(--font-weight-bold); }
    #how_intro .how_group h2 { margin:0px auto; font-size:var(--font-size-1S); font-weight:var(--font-weight-bold); }
    #how_intro .how_group p { margin-top:var(--font-size-1S); margin-bottom:0px; font-size:var(--font-size-1S); }

    #how_intro .lets_get_started { margin-top:var(--spacing-2L); font-size:var(--font-size-0); }

    /* accreditation */
    #accreditation { background-color:var(--color-light-gray); }
}

@media (max-width:1200px) {
    #how_intro .container_row_content { padding-top:var(--spacing-5L); }
            
    #how_intro .how_group { grid-template-columns:1fr 1fr; }

    #how_intro .how_group .step,
    #how_intro .how_group h2,
    #how_intro .how_group p { font-size:var(--font-size-0); }
}

@media (max-width:600px) {
    #how_intro .how_group { grid-template-columns:1fr; }
}