.wrapper {
    @apply transition-all rounded-t-md
    border-b-2 border-secondary bg-common-black bg-opacity-0
    hover:bg-opacity-[0.15];
}

/* .wrapper:hover {
    background-color: rgb(0, 0, 0, 0.15);
} */
a .wrapper:active {
    @apply bg-opacity-[0.25];
}
a .wrapper {
    @apply cursor-pointer;
}
.content {
    @apply w-full h-16 rounded-sm mb-4 relative flex
    flex-row items-center;
}
.divider {
    @apply border-b-2 w-full h-1 border-b-secondary mt-3 mb-3
}
.legend {
    @apply w-[70px] mt-2 h-[70px] relative inline-block
}

.name {
    @apply font-Abel text-2xl ml-2 max-w-[15.7rem] text-white-500 mt-4 w-auto;
}
.long {
    @apply text-xl;
}
.really_long {
    @apply text-base
}
.really_really_long {
    @apply text-sm
}
.long .teammate {
    @apply text-xl;
}
.really_long .teammate {
    @apply text-base
}
.really_really_long .teammate {
    @apply text-sm
}
.teammate {
    @apply font-Abel text-2xl text-white-500 cursor-pointer
     mt-4 w-auto transition-all duration-300 
     border-white-500 border-b-2 hover:border-red-500 hover:text-white-600;
}
.stats {
    @apply font-Abel whitespace-nowrap
    text-2xl text-gold-300 mt-4 ml-2;
}

.icons {
    @apply h-full w-auto max-w-[7rem] relative mt-8 ml-auto;
}
.icons span {
    @apply whitespace-nowrap;
}
.winrate {
    @apply inline-block;
}
.verified_icon {
    @apply inline-block relative mt-4 ml-1
     rounded-full z-10
}

.rank {
    @apply h-12 w-12 relative float-right mr-1;
}
.region {
    @apply h-12 w-12 relative mr-2 float-right;
}
.socials {
        @apply h-full w-24 mt-2 relative ml-2 float-right transition-all;
}
.socials span {
    @apply transition-all cursor-pointer hover:brightness-125 inline-block;
}
.socials span:nth-child(2) {
    @apply ml-2
}
.placement {
    @apply h-full min-w-[1.5rem] mt-10 text-4xl text-mint-500;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
a:nth-child(even) .wrapper .content .placement{
    @apply text-red-300
}
.wrapper:nth-child(even) .content .placement{
    @apply text-red-300
}


.parent {
    @apply overflow-hidden;
        display: grid;
        gap: 1rem;
        /*      grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); */
}
.parent[data-show-card*="true"] {
    @apply p-8 pt-8;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
}

/* Screen smaller than 950px */
@media (max-width: 950px) {
    .parent {
        @apply p-8 pt-8;
     grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    }
}

@media (max-width: 1650px) {

    .stats {
        @apply text-xl
    }
}
@media (max-width: 1430px) {

    .stats {
        @apply text-lg
    }
}
/* @media (max-width: 1380px) {
    .region {
        @apply w-10 h-10
    }
    .rank {
        @apply w-10 h-10
    }
    .stats {
        @apply text-lg
    }
} */
@media (max-width: 1380px) {
    /* Scale up in size */
    .region {
        @apply w-12 h-12
    }
    .rank {
        @apply w-12 h-12
    }
    .stats {
        @apply text-2xl
    }

}