*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Roboto, Helvetica, sans-serif;
    background: #f2f2f2;
}

.main-content {
    padding: 3vw 5vw 5vw;
}

h1 {
    font-family: Playfair Display, serif;
    font-size: clamp(25px, 7vw, 70px);
    font-weight: 200;
}

h1 + span {
    font-size: clamp(14px, 2vw, 20px);
}

.slideshow-container {
    margin-top: 4vw;
    overflow: hidden;
    min-height: 60vmin;
    cursor: grab;
    position: relative;
}

.slideshow-container:active {
    cursor: grabbing;
}


.slideshow {

  position: absolute;

  height: 100%;

  display: flex;

  pointer-events: none;

}

.slide {

  flex-shrink: 0;

  height: 100%;

  width: 80vmin;

  color: #fff;

  background-size: cover;

  background-position: center;

  position: relative;

}

.slide:not(:nth-child(1)){

  margin-left: 10px;

}

.overlay {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(0, 0, 0, 0.15);

}

.slide h2, .slide a {

  text-shadow: 0 0 5px rgba(0,0,0,0.39);

}

.slide h2 {

  position: absolute;

  top: clamp(10px, 2vw, 20px);

  left: clamp(10px, 2vw, 20px);

  font-size: clamp(20px, 3vw, 40px);

  font-weight: 300;

}

.slide a {

  position: absolute;

  bottom: clamp(10px, 2vw, 20px);

  right: clamp(10px, 2vw, 20px);

  font-size: clamp(16px, 3vw, 20px);

  font-weight: 300;

  color: #fff;

  pointer-events: auto;

}