@charset "UTF-8";
/* This is a CSS file */

@import url(./constants.css);

.wrapper { 
    max-width: 100%; 
    width: 100%; 
    position: relative; 
} 
  
.wrapper i { 
    height: 50px; 
    width: 50px; 
    cursor: pointer; 
    position: absolute; 
    top: 45%; 
    transform: translateY(-50%); 
    transition: 500ms;
    background-color: #0a0a0aB3;
    z-index: 8;
} 
  
#left {
    background-image: url('../img/pilleft.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#right {
    background-image: url('../img/pilright.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.wrapper i:first-child {
    left: 16px;
} 
  
.wrapper i:last-child {
    right: 16px;
} 
  
.wrapper .carousel { 
    display: grid; 
    grid-auto-flow: column; 
    grid-auto-columns: calc((100% / 3) - 12px); 
    gap: 1rem; 
    overflow-x: auto; 
    scroll-snap-type: x mandatory; 
    scroll-behavior: smooth; 
    scrollbar-width: none; 
} 
  
.carousel::-webkit-scrollbar { 
    display: none; 
} 
  
.carousel :where(.card, .img) { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
  
.carousel.dragging { 
    scroll-snap-type: none; 
    scroll-behavior: auto; 
} 
  
.carousel.no-transition { 
    scroll-behavior: auto; 
} 
  
.carousel.dragging .card { 
    cursor: grab; 
    user-select: none; 
} 
  
.carousel .card { 
    scroll-snap-align: start; 
    height: 560px; 
    list-style: none; 
    background: var(--black); 
    display: flex; 
    cursor: pointer; 
    width: 100%; 
    padding-bottom: 15px; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    gap: 1rem;
} 
  
.card .img { 
    width: 100%; 
    height: 90%; 
    border-radius: 50%; 
} 
  
.card .img * { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border: 4px solid var(--hvid); 
} 

.card a h2 { 
    font-weight: 500; 
    font-size: 1.56rem; 
    margin: 30px 0 5px; 
} 
  
.card span { 
    color: #6a6d78; 
    font-size: 1.31rem; 
  
}

/* Settings for individual cards (3 wide) */
#galvid1 {
    object-position: -440px 0px;
}

#galvid2 {
    object-position: -100px 0px;
}

#galvid3 {
    width: 100%;
    object-fit: contain;
    background-color: #fff;
}

#galvid4 {
    object-position: 0px 0px;
}

#galvid5 {
    object-position: 0px 0px;
    object-fit: cover;
}


/* Gallery MQ's */
/* Settings for individual at desktop (2 wide) */
@media screen and (max-width: 900px) { 
    .wrapper .carousel { 
        grid-auto-columns: calc((100% / 2) - 9px); 
  
    } 

    #galvid1 {
        object-position: -420px 0px;
    }

    #galvid2 {
        object-position: -70px 0px;
    }

    #galvid3 {
        object-position: 0px 0px;
    }

    #galvid4 {
        object-position: 0px 0px;

    }
} 

/* Settings for individual cards at smaller screen width (1 wide)*/
@media screen and (max-width: 600px) { 
    .wrapper .carousel { 
        grid-auto-columns: 100%; 
    } 

    #galvid1 {
        object-position: -350px 0px;
    }

    #galvid4 {
        object-position: 0px 0px;

    }

}


/* max-width because all screens over 768 (desktops) shold not get scaled */

@media screen and (orientation: landscape) and (max-width: 768px) {
    .carousel .card { 
        height: 280px; 
    } 

    #galvid1 {
        object-position: 0px 0px;
    } 
}