/* Collection text */

.collection-title {
	font-size: 6rem;
	margin-top: 10vh;
}

.collection-description {
	grid-column: 2 / span 5;
	font-size: 1.4rem;
	margin-bottom: 5vh;
}

/* Slideshow */

.collection-slideshow {
  width: 100%;
  position: relative;
  overflow: hidden;
  cursor: none;
  touch-action: pan-y;
	
	display: flex;
	flex-direction: column;	
}

.slides {
  display: flex;
  width: 100%;
  gap: 20px;
  transition: transform 600ms ease;
}

.slide {
  width: 25%;
  flex: 0 0 calc((100% - 4 * 20px) / 4);
}

.slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* Slideshow Cursor */
.custom-cursor {
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  font-size: 38px;
  color: #f6eaff;
  z-index: 99;
  mix-blend-mode: difference;
  display: none;
}

/* slideshow Number */
.slide-counter {
	margin-top: 0.8rem;
	display: flex;
    justify-content: flex-start;
    gap: 0.3rem;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
    z-index: 10;
    color: black;
}



/* Detail section */

.collection-details {
    margin-top: 5vh;
	grid-column: 1 / -1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.detail-row {
    display: flex;
    width: 100%;
    height: 100vh;
}

.detail-row .large-right {
    flex-direction: row-reverse;
}

.detail-large {
    width: 50%;
    height: 100vh;
}

.detail-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.detail-small {
	position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.detail-small img {
    width: 30%;
    height: auto;
}



/* ———————————————— Responsive —————————————————— */

/* Big Screens */

@media (min-width: 2000px) {

	.collection-details {
		width: auto;
        margin-left: 0;
}
	
	.detail-row,
    .detail-large {
        height: 50vh;
    }
	
	.collection-title {
	margin-top: 5vh;
}

.collection-description {
	margin-bottom: 2.5vh;
}
}

/* Phone Screens */

@media (max-width: 768px) {

    .collection-title {
        font-size: 2.2rem;
        margin-top: 6vh;
        margin-bottom: 2vh;
        text-align: left !important;
    }

    .collection-description {
        grid-column: 1 / -1;
        margin-bottom: 4vh;
		/*
		text-align: justify;
		hyphens: auto;
		text-justify: inter-word;*/
    }
	
	.slides {
        gap: 10px;
    }

    .slide {
        width: 100%;
        flex: 0 0 100%;
    }

    .collection-slideshow {
        margin-bottom: 6vh;
    }
	
	.collection-details {
    width: auto; 
    margin-left: 0;
	margin-top: 0;
    }
	
	.slide-counter {
    justify-content: center;
}

	
	.detail-row {
    flex-direction: column;
    height: auto;
	}
	
	.detail-row .large-right {
    flex-direction: column; 
    }
	
	.collection-details .detail-row:nth-of-type(2) {
    display: none;
	}
	
	.detail-large {
    width: 100%;
    height: auto;
	}
	
	.detail-small {
    width: 100%;
    padding: 10vh 0;
	}

	.detail-small img {
    width: 60%;
	}	
}