@charset "utf-8";

/*==================================================
ARTISTS / CATALOGUES
==================================================*/

.artists-section{

    position:relative;

    width:100%;

    background:#000;

    padding:140px 0 110px;

    overflow:hidden;

}

/*==================================================
HEADER
==================================================*/

.artists-header{

    width:min(94%,1700px);

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:70px;

}

.artists-title{

    margin:0;

    color:#fff;

    font-family:'Bebas Neue',sans-serif;

    font-size:clamp(68px,5.5vw,115px);

    font-weight:400;

    line-height:.9;

    letter-spacing:1px;

    text-transform:uppercase;

}

/*==================================================
VIEW LINK
==================================================*/

.artists-link{

    display:flex;

    align-items:center;

    gap:22px;

    margin-top:45px;

    text-decoration:none;

    color:#fff;

    font-family:'IBM Plex Mono',monospace;

    font-size:20px;

    letter-spacing:2px;

    text-transform:uppercase;

    white-space:nowrap;

}

.artists-link span{

    transition:.35s;

}

.artists-link svg{

    width:70px;

    height:20px;

    overflow:visible;

}

.artists-link line{

    stroke:#A54CC4;

    stroke-width:2;

    transition:.35s;

}

.artists-link polyline{

    stroke:#A54CC4;

    stroke-width:2;

    fill:none;

    transition:.35s;

}

.artists-link:hover span{

    color:#A54CC4;

    letter-spacing:3px;

}

.artists-link:hover svg{

    transform:translateX(8px);

}

.artists-link:hover line{

    x2:110;

}

/*==================================================
SLIDER
==================================================*/

.artists-slider{

    width:100%;

    overflow:hidden;

    cursor:grab;

    user-select:none;

}

.artists-slider:active{

    cursor:grabbing;

}

/*==================================================
TRACK
==================================================*/

.artists-track{

    display:flex;

    gap:28px;

    padding:0 3vw;

    width:max-content;

    will-change:transform;

    transform:translate3d(0,0,0);

    backface-visibility:hidden;

}

/*==================================================
CARD
==================================================*/

.artist-card{

    position:relative;

    flex:none;

    width:290px;

    height:320px;
    overflow:hidden;

    background:#111;

    opacity:0;

    transform:translateY(120px);

    transition:

    opacity .9s,

    transform .9s,

    box-shadow .4s;

}

.artist-card.visible{

    opacity:1;

    transform:none;

}

.artist-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

    transform 1s,

    filter .8s;

}

.artist-card:hover img{

    transform:scale(1.08);

    filter:

    brightness(1.08)

    contrast(1.08)

    saturate(1.12);

}

.artist-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

    to top,

    rgba(0,0,0,.72),

    transparent 35%

    );

    opacity:0;

    transition:.45s;

}

.artist-card:hover::after{

    opacity:1;

}

.artist-card:hover{

    box-shadow:

    0 30px 70px rgba(165,76,196,.22);

}

/*==================================================
TEXT
==================================================*/

.artist-overlay{

    position:absolute;

    left:35px;

    bottom:30px;

    z-index:5;

    color:#fff;

    opacity:0;

    transform:translateY(25px);

    transition:.45s;

}

.artist-card:hover .artist-overlay{

    opacity:1;

    transform:none;

}

.artist-overlay h3{

    margin:0;

    font-family:'Bebas Neue',sans-serif;

    font-size:46px;

    letter-spacing:2px;

}

.artist-overlay p{

    margin-top:6px;

    font-family:'IBM Plex Mono',monospace;

    font-size:15px;

    letter-spacing:2px;

}

/*==================================================
SCROLLBAR
==================================================*/

.artists-slider::-webkit-scrollbar{

    display:none;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1500px){

.artist-card{

width:290px;
height:320px;

}

}

@media(max-width:1200px){

.artists-header{

display:block;

}

.artists-link{

margin-top:30px;

}

 .artist-card{
        width:260px;
        height:290px;
    }

}

@media(max-width:992px){

.artists-section{

padding:90px 0;

}

.artists-title{

font-size:18vw;

}

 .artist-card{
        width:240px;
        height:270px;
    }

}
@media (max-width:768px){

    .artist-card{
        width:220px;
        height:250px;
    }

}


@media(max-width:600px){

.artist-card{

 width:220px;
        height:250px;

}

.artists-link{

font-size:15px;

gap:15px;

}

.artists-link svg{

width:60px;

}

}

/*=========================
TABLET
=========================*/

@media (max-width:992px){

    .artists-title{

        font-size:9vw;

        line-height:.9;

    }

}

/*=========================
MOBILE
=========================*/

@media (max-width:768px){

    .artists-title{

        font-size:11vw;

        line-height:.92;

        letter-spacing:.5px;

    }

}

/*=========================
SMALL MOBILE
=========================*/

@media (max-width:480px){

    .artists-title{

        font-size:12vw;

        line-height:.95;

    }

}