.artworkLink{
    color: #fa1413;  
}

.container {
    position:relative;
    background-color: transparent;
    border:none;
    width: 100%;
    max-width: 1200px;
    height: 80vh;
    overflow-y: auto; 
    overflow-x: hidden; 
    position:relative;
    box-sizing: border-box;
    margin: 2rem auto; 
    padding: 2rem;
    margin-right: 1rem;
  }


#leftBtn{
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 5%;
    width: 3rem;
}

#rightBtn{
    z-index: 10;
    position: absolute;
    top: 50%;
    right: 1%;
    width: 3.5rem;
}




#artworkBackground {
    width: 100%;         
    height: 100%;       
    object-fit: fill;    
    z-index: -1000;
    position: absolute;
}

.img1, .img2, .img3 {
    position: relative;
    display: inline-block;
}

.img2 .description {
    position: absolute;
    bottom: -2rem;
    /* left: 50%;
    transform: translateX(-50%); */
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    width: 100%;
    pointer-events: none;
    z-index: 1000;
}
.slideshow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    z-index: 5;
    gap: -10rem;
}

.slideshow .img1,
.slideshow .img2,
.slideshow .img3 {
    width: 20rem;
    height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.slideshow .img1 img,
.slideshow .img2 img,
.slideshow .img3 img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures images scale to fit without distortion */
}

.img2 {
    margin-left: auto;
    margin-right: auto;
}


.img1 img, .img2 img, .img3 img { 
    width: 20rem;
    height: 20rem;
    transition: all 0.3s ease;
    z-index: 100;
    border: 2px solid rgba(250, 20, 19, 0);
    position: relative;
}

.img1 img { 
    opacity: 0.8;
    transform: scale(0.8) translateX(15%);
}

.img2 img { 
    opacity: 1;
    transform: scale(1.2);
    z-index: 101;
}

.img3 img { 
    opacity: 0.8;
    transform: scale(0.8) translateX(-15%);
}

.img2 img:hover {
    border: 3px solid #fa1413;
    /* background-color: #000000; */
    opacity: .3;
}

.img1, .img2, .img3 {
    position: relative;
}

.description {
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    width: max-content;
    pointer-events: none;
    z-index: 1000;
}

.img1:hover .description,
.img2:hover .description,
.img3:hover .description {
    opacity: 1;
}

#header{
    position: absolute;
    top:-15%;
    left:38%;
    z-index: 10;
    width: 20rem;
    height: 20rem;
}

#rightBtnTop {
    z-index: 10;
    position: absolute;
    top: 5%;
    right: 20%;
    width: 5rem;
    height: 5rem;
    cursor: pointer;
}

#leftBtnTop {
    z-index: 10;
    position: absolute;
    top: 5%;
    left: 25%;
    width: 5rem;
    height: 5rem;
    cursor: pointer;
}


#leftBtn .leftBtnFill, #rightBtn .rightBtnFill {
    fill: white;
    cursor: pointer;
}

#leftBtn .leftBtnFill:hover {
    fill: #fa1413;
}

#rightBtn .rightBtnFill:hover {
    fill: #fa1413;
}

#leftBtnTop .leftBtnFillTop, #rightBtnTop .rightBtnFillTop {
    fill: white;
    cursor: pointer;
}

#leftBtnTop .leftBtnFillTop:hover {
    fill: #fa1413;
}

#rightBtnTop .rightBtnFillTop:hover {
    fill: #fa1413;
}



@media (min-width: 1371px) {
    .container {
        margin-left: calc(0px + 1rem);
        width: 80%;
        margin-right:2rem;
    }
}

@media (max-width: 1369px) and (min-width: 900px) { 
    .container {
        /* width: calc(70vw - 2rem);   */
        margin-left: calc(50px + 1rem); 
        margin-right:3rem;
        width: 65%;
    }

    .slideshow {
        left:52%;
    }

    .img1 img { 
        transform: scale(0.6) translateX(95%);
    }
    
    .img2 img { 
        transform: scale(1.0);
    }
    
    .img3 img { 
        transform: scale(0.6) translateX(-95%);
    }

    #leftBtn{
        left: 6%;
    }
    
    #rightBtn{
        right: 2%;
    }

    #header{
        left:32%;
    }

    #leftBtnTop{
        left:18%
    }

    #rightBtnTop{
        right:17%
    }

}

@media (max-width: 1253px) and (min-width: 1090px) { 
    #leftBtnTop{
        width:4rem;
        height:4rem;
        left:18%;
        top:6%;
    }

    #rightBtnTop{
        width:4rem;
        height:4rem;
        right:10%;
        top:6%;
    }
}

@media (max-width: 1090px) and (min-width: 900px) { 
    .slideshow {
        left:53%;
    }

    .img1 img { 
        transform: scale(0.5) translateX(145%);
    }
    
    .img2 img { 
        transform: scale(.8);
    }
    
    .img3 img { 
        transform: scale(0.5) translateX(-145%);
    }

    #header{
        left:30%;
    }

    #leftBtnTop{
        width:4rem;
        height:4rem;
        left:15%;
        top:7%;
    }
    
    #rightBtnTop{
        width:4rem;
        height:4rem;
        right:10%;
        top:7%;
    }
    
}

@media (max-width: 1024px) and (min-width: 954px) { 
    
    #rightBtnTop{
        width:4rem;
        height:4rem;
        right:5%;
        top:7%;
    }
}

@media (max-width: 953px) and (min-width: 900px) { 
    #rightBtnTop{
        right:2%;
        top:7%;
    }
}
@media (max-width: 899px) and (min-width: 769px) {
    .container {
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 2rem auto;
        width: 95%;
        /* height:65vh; */
        font-size: 1rem;
        
    }
    #header{
        left:32%

    }
    #rightBtn{
        right: 5%;
    }


    .img1 img, .img2 img, .img3 img { 
        width: 15rem;
        height: 15rem;
    }

    .img1 img { 
        transform: scale(0.8) translateX(70%);
    }
    
    .img2 img { 
        transform: scale(1.2);
    }
    
    .img3 img { 
        transform: scale(0.8) translateX(-70%);
    }

    .slideshow {
        top: 20%;
        left:52%;
    }

    #rightBtnTop{
        right:17%;
    }

    #leftBtnTop{
        left:17%;
    }


}

@media (max-width: 847px) and (min-width: 769px) {
    #rightBtnTop{
        right:13%;
    }


}
@media (max-width: 768px) {
      .container {
        width: 85%;
        margin: 2rem auto;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 2rem auto;
        width: 95%;
        height:80vh;
      }

      #header{
        top:-10%;
        width: 18rem;
        height: 18rem;
        left:30vw;
      }

      .img1 img, .img2 img, .img3 img {
        width: 50vw;
        height: auto;
        transform: none;
      }
      .img1, .img3 {
        visibility: hidden;
        width: 0;
        height: 0;
        overflow: hidden;
        position: absolute;
      }
      
      .slideshow {
        position: absolute;
        top:25%;
        left:55%;
        width: 100%;
      }
      
      #rightBtn{
        top:60%;
        right: 5%;
        width: 3rem;
    }
    #leftBtn{
        top:60%;
        left:12%;
    }

    #rightBtnTop{
        right:6%;
        top:10%;
        width:3.5rem;
        height:3.5rem;
    }

    #leftBtnTop{
        left:15%;
        top:10%;
        width:3.5rem;
        height:3.5rem;
    }
}

@media (max-width: 648px) and (min-width: 597px) {
    #rightBtnTop{
        right:2%;
       
    }
}
@media (max-width: 598px){
    #header{
        left:30vw;
        top:-10%;
        width:15rem;
        height:15rem;
    }

    #rightBtnTop{
        right:6%;
        top:7%;
        width:2rem;
        height:2rem;
    }

    #leftBtnTop{
        left:10%;
        top:7%;
        width:2em;
        height:2rem;
    }
}


@media (max-width: 566px) and (min-width: 534px){
    #rightBtnTop{
        right:1%;
        top:5%;
        width:3rem;
        height:3rem;
    }

    #leftBtnTop{
        left:10%;
        top:5%;
        width:3rem;
        height:3rem;
    }
}

@media (max-width: 533px) and (min-width: 501px){
    #header{
        left:27%;
    }
    #rightBtnTop{
        top:7%;
    }

    #leftBtnTop{
        left:10%;
        top:7%;
    }

}

@media (max-width: 500px) and (min-width:430px){
    #header{
        top:1vh;
        left:32vw;
        width:12rem;
        height: 12rem;
    }
    .img1 img, .img2 img, .img3 img {
        width: 40vw;
        height: auto;
        transform: none;
      }
      .img1, .img3 {
        visibility: hidden;
        width: 0;
        height: 0;
        overflow: hidden;
        position: absolute;
      }
      

      #rightBtn{
        right: 2%;
    }
    #leftBtn{
        left:11%;
    }

    #rightBtnTop{
        right:6%;
        top:15%;
        width:2rem;
        height:2rem;
    }

    #leftBtnTop{
        left:10%;
        top:15%;
        width:2em;
        height:2rem;
    }
}

@media (max-width: 429px) and (min-width:381px){
    #header{
        top:-7%;
        left:27vw;
        width:12rem;
        height: 12rem;
    }

    #rightBtn{
        right:2%;
        width: 3rem;
    }
    #leftBtn{
        left:4%;
    }

}


@media (max-width: 380px)and (min-width:321px){
    .slideshow {
        top:25%;
    }
    #header{
        top:-4%;
        left:32vw;
        width:10rem;
        height: 10rem;
    }
}

@media (max-width: 320px){
    #header{
        top:-4%;
        left:26vw;
        width:10rem;
        height: 10rem;
    }
}