body{
  background: #000;
}
section.banner-page{
  &::before{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
  }
}
section.logo-partners {
  margin-top: 70px;
  .container{
    /*Position on the page for testing*/
    .partners-grid {  
      /*Locally scoped variables*/
      --gap: 0.5rem;
      --line-offset: calc(var(--gap) / 2);
      --line-thickness: 2px;
      --line-color: var(--bg-color-white);
    
      /* Grid layout */
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      overflow: hidden;
      gap: var(--gap);
      
      /*Make the grid items show up*/
      .partner-item{
        padding: 14px 21px;
        box-sizing: border-box;
        
        /*Make Grid Items Control Absolute Pseudo Positioning*/
        position: relative;
        .container-img{
          width: 100%;
          height: 100%;
          padding: 1rem 0.5rem;
          box-sizing: border-box;
          background: var(--bg-color-white);
          border-radius: 20px;
          transition: all ease 0.5s;
          img{
            height: 100%;
            width: 100%;
            object-fit: contain;
            object-position: center;
          }

          &:hover{
            transform: scale(0.8);
          }
        }

        /* Pseudo Element Shared Styling */
        &::after,&::before{
          content: '';
          position: absolute;
          background-color: var(--line-color);
          z-index: 1;
        }
        /*Row Borders */
        &::after{
          inline-size: 100vw;
          block-size: var(--line-thickness);
          inset-inline-start: 0;
          inset-block-start: calc(var(--line-offset) * -1);
        }
        /* Column Borders */
        &::before{
          inline-size: var(--line-thickness);
          block-size: 100vh;
          inset-block-start: 0;
          inset-inline-start: calc(var(--line-offset) * -1);
        }

      }
    }
  }  
}

@media (max-width: 700px) {
  section.logo-partners {
    margin-top: 30px;
    .container{
      .partners-grid {  
        grid-template-columns: repeat(2, minmax(0, 1fr));
        .partner-item{
          padding: 10px 6px;
          .container-img{
            padding: 0.5rem 0rem;
            img{
              
            }
          }
          &::after,&::before{
            display: none;
          }  
        }
      }
    }  
  }
}