.shopping-tool_section
{
    padding: 3.5rem;
}
.shopping-tool_container {
    display: grid;
    /* END - mob changing position */
    /* grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr); */
    
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.shopping-tool_item_1 { 
    grid-area: 1 / 1 / 3 / 3;
    position: relative; 
}

.shopping-tool_item_2 { 
    grid-area: 1 / 3 / 3 / 4; 
    position: relative; 
}

.shopping-tool_item_3 { 
    grid-area: 1 / 4 / 2 / 5;
    position: relative; 
}

.shopping-tool_item_4 { 
    grid-area: 2 / 4 / 4 / 5; 
    position: relative; 
}

.shopping-tool_item_5 { 
    grid-area: 3 / 3 / 4 / 4; 
    position: relative; 
}

.shopping-tool_item_6 { 
    grid-area: 3 / 2 / 4 / 3;
    position: relative; 
}

.shopping-tool_item_7 { 
    grid-area: 3 / 1 / 4 / 2; 
    position: relative; 
}



.shopping-tool_item_1 img, .shopping-tool_item_2 img,
.shopping-tool_item_3 img, .shopping-tool_item_4 img,
.shopping-tool_item_5 img, .shopping-tool_item_6 img,
.shopping-tool_item_7 img
{
    filter: brightness(0.5);
}
.shopping-tool-article-element{
    width: 100%;
    height: 100%;
}
.shopping-tool-article-title{
    position:absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.shopping-tool-article-title h2{
    color: #fff;
}


.h5 {
    font-size: 18px;
}

@media only screen and (max-width: 768px) {
    .shopping-tool_container{
      /* display: flex; */
      padding:0.5rem;
      grid-template-areas: 
      'mob-1'
      'mob-2'
      'mob-3'
      'mob-4'
      'mob-5'
      'mob-6'
      'mob-7';
    }
    .shopping-tool_section {
        padding: 0.5rem;
    }
    article[class^="shopping-tool_item"]{
        padding-bottom: 1rem;
    }

    /* mob changing position */
    .shopping-tool_item_1 { 
        grid-area: mob-1;
    }
    .shopping-tool_item_2 { 
        grid-area: mob-4; 
    }
    .shopping-tool_item_3 { 
        grid-area: mob-6;
    }
    .shopping-tool_item_4 { 
        grid-area: mob-7; 
    }
    .shopping-tool_item_5 { 
        grid-area: mob-5; 
    }
    .shopping-tool_item_6 { 
        grid-area: mob-3;
    }
    .shopping-tool_item_7 { 
        grid-area: mob-2; 
    }
    /* END - mob changing position */
  }