ul.sponsors {
    display: block;
    padding: 20px;
    display: grid;
    grid-template-columns: 100%;	
   
}

@media screen and (min-width: 700px) {
    ul.sponsors {
        grid-template-columns: calc(50% - 10px) calc(50% - 10px);	
        column-gap: 20px;
    }
  }

ul.sponsors>li{
    background-color: rgb(255, 255, 255);
    border-radius: 12px;
    padding: 12px;
    height: 300px;
    
    position: relative;
    margin-bottom: 20px;
    position: relative;

 }

 ul.sponsors>li::before {
    content: '';
background: linear-gradient(0deg,rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0.51) 26%, rgba(255, 255, 255, 1) 72%, rgba(200, 200, 200, 1) 100%);
    position: absolute;
    border-radius: 16px;
    z-index: -1;
    top: -2px;
    bottom: -2px;
    right: -2px;
    left: -2px;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
 }


 @keyframes rotate{
    to{ transform: rotate(360deg); }
 }

 ul.sponsors>li::affter {
    content: '';
    animation: rotate 1.5s linear infinite; 
    display: block;
    position: relative;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    
    height: 20px;
    width: 20px;
    border-radius: 50%;
    
    border-top: solid 4px rgba(0,0,0,0.3);
    border-left: solid 4px rgba(0,0,0,0.1);
    border-bottom: solid 4px rgba(0,0,0,0.3);
    border-right: solid 4px rgba(0,0,0,0.1);
 }

 ul.sponsors>li>img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    border-radius: 6px;
    max-width: 90%;
    max-height: 90%;
    opacity: 1;
    transition: 0.3s all;
}
ul.sponsors>li.show>img {
    opacity: 1;
}

ul.sponsors>li.show::after {
    display: none;
}