.grip_li1               {width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 0px; grid-row-gap: 0px;}
.grip_li1 div           {transition:all .8s; position:relative; overflow: hidden;}
.grip_li1 div:hover .explain {top:0px;}    
.grip_li1 div .explain  {position:absolute; top:-200px; width:calc(100% - 40px); padding:20px 20px 0px 20px; height:auto; min-height:100px; background:linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%,rgba(0,0,0,0.30) 70%,rgba(0,0,0,0) 100%); color:var(--color_theme); font-size:14.5px; line-height: 1.3em; transition:all .8s;}
.grip_li1 div .content  {width:calc(100% - 60px); height:calc(100% - 60px); padding:30px; overflow:hidden; font-size:14.5px; line-height: 1.3em; color:var(--color_theme); text-align: justify;}
.grip_li1 div .content .over {overflow:auto; width:100%; height:100%; display:block;}
.grip_li1 div h1        {font-size:20px; text-transform: uppercase; margin-bottom:20px;}
.grip_li1 div h2        {font-size:18px; text-transform: uppercase; margin-bottom:20px;}
.grip_li1 div a         {position:absolute; bottom:20px; right:20px; padding-right:20px; display:block; color:var(--color_theme);}
.grip_li1 div a:after   {position:absolute; right:0px; content:">"; font-size:14.5px; line-height: 1.3em; color:var(--color_theme); transition:all .8s}
.grip_li1 div a:hover:after {right:-5px;}
.grip_li1 div p:last-child {margin:0px;}
.grip_li1 .incenter     {display: flex; align-items: center; justify-content: center; text-align:center; color:var(--color_theme);}

.grip_li1 .div1         {grid-area: 1 / 1 / 3 / 3; background:url('../img/fond/fond_spot_001.jpg') center center no-repeat; background-size:cover; }
.grip_li1 .div2         {grid-area: 1 / 3 / 2 / 5; background:url('../img/fond/fond_spot_002.jpg') bottom center no-repeat; background-size:cover;}
.grip_li1 .div3         {grid-area: 2 / 3 / 3 / 4; background:var(--background_gen); }
.grip_li1 .div4         {grid-area: 2 / 4 / 3 / 5; background:url('../img/fond/fond_spot_003.jpg') center center no-repeat; background-size:cover; }
.grip_li1 .div5         {grid-area: 3 / 1 / 4 / 3; background:var(--background_gen);}
.grip_li1 .div8         {grid-area: 3 / 3 / 4 / 5; background:url('../img/fond/fond_spot_006.jpg') center center no-repeat; background-size:cover; filter:saturate(0);}
.grip_li1 .div8:hover   {filter:saturate(1);}

.grip_li2               {width:100%; height:150px; background:var(--color_theme_tr); display: flex; align-items: center; justify-content: center; margin-top: -6px;}
.grip_li2 div a         {position:relative; display:block; padding-right:20px; font-size:22px; color:var(--color_theme);}
.grip_li2 div a:after   {position:absolute; right:0px; content:">>"; color:var(--color_theme); font-size:22px; line-height: 1.3em; letter-spacing: -6px; transition:all .8s}
.grip_li2 div a:hover:after {right:-10px;}
.grip_li2 .content      {width:auto; height:auto; font-size:22px; color:var(--color_theme); text-align: center;}

@media screen and (min-width:320px) and (max-width:1023px) {
    .grip_li1           {display: block;}
    .grip_li1 .div2     {aspect-ratio: 2 / 1;}
    .grip_li1 .div2     {aspect-ratio: 2 / 1;}
    .grip_li1 .div3     {aspect-ratio: 3 / 1;}
    .grip_li1 .div5     {aspect-ratio: unset;}
    .grip_li1 .div6     {aspect-ratio: 2 / 1;}
    .grip_li1 .div7     {aspect-ratio: 1 / 1;}
    .grip_li1 .div8     {aspect-ratio: 2 / 1;}
}