.overview {
    --tile-size: 92px;
}


.overview { margin-top: 5px; display: flex; width: 100%; gap: 3px;}
.overview > .column[data-column="player"] {flex-grow: 1;}
.overview > .column[data-column="news"] {flex-grow: 1;}

.overview .box {width: 100%; height: 100%; padding: 1px;}
.overview .cover {border: 1px solid #ccc; width: 100%; height: 100%; padding: 2px; display: flex;}

.overview .padding {padding: 1px;}
.overview .column .padding >.title {width: 100%; height: 40px; display: flex;  justify-content: center; align-items: center; font-family: var(--font-1); font-weight: bold; background: linear-gradient(180deg, var(--theme-gradient-1) 0%, var(--theme-gradient-4) 100%); color: var(--theme-text-color); margin-bottom: 3px;}

.overview-player .radio-old {display: flex;  user-select: none; cursor: pointer; height: 80px;}
.overview-player .radio-old .left {background: #000; width: 80px; display: flex; justify-content: center; align-items: center;}
.overview-player .radio-old .right {flex-grow: 1; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 27px; background: linear-gradient(180deg, #fccb26 0%, #feface 30%, #c9971d 70%, #feface 100%); color: #333638;}
.overview-player .radio-old .right > div:nth-child(1) {display: flex; align-items: center; gap: 20px;}
.overview-player .radio-old .emblem {color: gold; width: 55px; height: 55px; border: 1px solid gold; border-radius: 100%;}
.overview-player .radio-old .text {font-size: 20px;text-align: center;}
.overview-player .radio-old .text > div:nth-child(1) {font-weight: bold;}

.overview-player .radio {display: flex; border-radius: 13px; justify-content: space-between; user-select: none; cursor: pointer; height: 80px; background: url('../img/icons/radio/background.jpg') center/cover no-repeat; overflow: hidden;}



.overview .article {display: flex;}
.overview .article .image {}
.overview .article .text {flex-grow: 1; padding: 7px 10px; display: flex; gap: 7px; flex-direction: column;}
.overview .article .title { font-weight: bold; text-transform: uppercase; font-size: 14px;

    text-overflow:ellipsis;
    overflow:hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
}
.overview .article .description {font-size: 12px;

    text-overflow:ellipsis;
    overflow:hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.overview-player {margin: 10px 0 25px 0; }
.overview-player .grid {display: grid; gap:5px; grid-template-columns: repeat(4, 1fr);}
.overview-player .grid > div {position: relative; height: 80px; overflow: hidden; }
.overview-player .line {width: calc(100% - 100px); height: 2px; background: var(--thin-border); margin: 20px auto;    position: relative;z-index: 200;}
.overview-player .line.mobile {display: none;}
.overview .line {width: calc(100% - 100px); height: 2px; background: var(--thin-border); margin: 20px auto;    position: relative;z-index: 200;}
.overview .line.mobile {display: none;}


.overview .column a {text-decoration: none;}
.overview-player a {text-decoration: none;}

/*.promotion*/
.overview .column[data-column="promotion"] .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: row;
    grid-template-areas:
    "tile-1 tile-1 tile-4 tile-4 tile-4"
    "tile-1 tile-1 tile-4 tile-4 tile-4"
    "tile-2 tile-3 tile-4 tile-4 tile-4";
    width: calc(var(--tile-size) * 5);
    height: calc(var(--tile-size) * 3);
}

/*.partner*/
.overview .column[data-column="partner"] .grid {  display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: row;
    grid-template-areas:
    "tile-1"
    "tile-2";
    grid-area: right;
    width: calc(var(--tile-size) * 1.5);
    height: calc(var(--tile-size) * 3);
}

/*.player*/
.overview .column[data-column="player"] .grid {  display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto) 1fr;
    grid-auto-flow: row;
    grid-template-areas:
    "tile-1"
    "tile-2"
    "tile-3";
    flex-grow: 1;
    height: calc(var(--tile-size) * 3);
}

/*.news*/
.overview .column[data-column="news"] .grid {  display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: row;
    grid-template-areas:
    "tile-1"
    "tile-2"
    "tile-3";
    flex-grow: 1;
    height: calc(var(--tile-size) * 3);
}



/* debug */

.tile-1 { grid-area: tile-1; }
.tile-2 { grid-area: tile-2; }
.tile-3 { grid-area: tile-3; }
.tile-4 { grid-area: tile-4; }
.tile-5 { grid-area: tile-5; }
.tile-6 { grid-area: tile-6; }
.tile-7 { grid-area: tile-7; }



.skeleton-box {
    display: inline-block;
    position: absolute;
    top: 0; left: 0;
    overflow: hidden;
    background-color: #DDDBDD;
    width: 100%; height: 100%;
    z-index: -10;
    border-radius: 15px;
}
.skeleton-box::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
    -webkit-animation: shimmer 2s infinite;
    animation: shimmer 2s infinite;
    content: "";
}
@-webkit-keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}
@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}