@media all {
    /* override */
    body { background-color:var(--color-light-gray); }

    /* bl_intro */
    #bl_intro { background-color:var(--color-light-gray); }
    #bl_intro .container_row_content { padding-top:var(--spacing-1L); }

    #bl_intro h2 { margin-bottom:var(--spacing-0); text-align:center; }
        
    #bl_intro ul.blog_list { grid-template-columns:repeat(3, 1fr); align-items:stretch; }
        
    #bl_intro ul.blog_list li { background-color:var(--color-white); }
    #bl_intro ul.blog_list li img { width:100%; height:calc(var(--spacing-5L) * 1.5); object-fit:cover; background-color:var(--color-blue); }
    #bl_intro ul.blog_list li a { position:absolute; bottom:var(--spacing-1L); left:var(--spacing-1L); z-index:1;  }

    #bl_intro ul.blog_list li .body { padding:var(--spacing-0) var(--spacing-1L) var(--spacing-3L) var(--spacing-1L); }
    #bl_intro ul.blog_list li .body p.date { margin-top:0px; margin-bottom:var(--spacing-4S); font-weight:var(--font-weight-bold); }
    #bl_intro ul.blog_list li .body p.title { margin-top:0px; margin-bottom:var(--spacing-1L); }

    #bl_intro .square_2_1 { position:absolute; top:35vh; left:calc(var(--spacing-3L) * -1)}


    /*-- left side */
    #bl_intro .circle_blue_10 { position:absolute; height:var(--spacing-0); top:var(--spacing-1L); left:10%; }
    #bl_intro .circle_green_11 { position:absolute; height:var(--spacing-1L); top:calc(var(--spacing-5L) * 3); left:-5%; }

    #bl_intro .zigzag_yellow_20 { position:absolute; height:var(--spacing-4L); top:var(--spacing-1S); left:-5%; }
    #bl_intro .ring_blue_30 { position:absolute; height:var(--spacing-5L); top:calc(var(--spacing-5L) * 1.2); left:-12%; }

    /*-- right side */
    #bl_intro .circle_green_100 { position:absolute; height:var(--spacing-1L); top:var(--spacing-2S); right:10%; }
    #bl_intro .circle_blue_101 { position:absolute; height:var(--spacing-0); top:var(--spacing-5L); right:-5%; }

    #bl_intro .squiggle_red_110 { position:absolute; height:var(--spacing-5L); top:0px; right:-7%; transform:rotate(65deg); }
    #bl_intro .squiggle_yellow_111 { position:absolute; height:calc(var(--spacing-5L) * 1.2); top:calc(var(--spacing-5L) * 2.6); right:-12%; }
}

@media (max-width:1400px) {

}

@media (max-width:1200px) {

}

@media (max-width:1000px) {

}

@media (max-width:800px) {
    #bl_intro ul.blog_list { grid-template-columns:1fr 1fr; }
}

@media (max-width:600px) {
    
}