.club_div {
  position:relative;
  width: calc(100% + max(0px, calc(20px - 5vw)));
  border-radius: 25px;
  border: 2px solid var(--main-color);
  background-color: var(--item-color);
  height: min(140px, calc(90px + 10vw));
  cursor: pointer;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  transform-origin: top left;

  margin: min(0px, calc(5vw - 20px));
  margin-top:15px;
  margin-bottom:15px;
}

  
  .club_div:hover {
    filter: brightness(80%);
  }

  .bg_class {
    border-radius: 23px 0 23px 0;
    width: calc(100% - calc(min(110px, 21vw) + 40px));
    height: min(100px, calc(70px + 7vw));
    object-fit: cover;
    filter: brightness(90%);
  }

  .bg_icon {
    position: absolute;
    border-radius: 50%;
    width: min(90px, 20vw);
    height: min(90px, 20vw);
    float: right;
    top:20px;
    right:20px;
    background-color: var(--main-color);
    border: 6px solid var(--main-color);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  }

  .club_title {
    position: absolute;
    color:var(--details-color);
    bottom:26px;
    left:10px;
    font-size: min(40px, 6.7vw);
    text-shadow:0px 0px 6px #000;
  }

  .club_disc{
    position: absolute;
    bottom: 0px;
    left:10px;
    margin-bottom: 8px;
    font-size: min(20px, 5vw);
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    max-width: calc(100% - min(90px, 20vw) - 20px); 
  }

  .image-wrapper {
    width: calc(100% + 40px);
    margin: -20px;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    position: relative;  
}

.image-wrapper:before {
    content: "";
    display: block;
    padding-top: 50%;
}

#big_bg_club {
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;
    height: 100%;
    object-fit: cover;
}