/* Contents Sections */

section.contents {
  padding: 12px 0px 12px 0px;
  overflow: auto;
}

.contentsContainer::-webkit-scrollbar { 
  display: none; /* Chrome Safari */
}

.contents { 
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

.contentsContainer {
  overflow: auto;
  scroll-behavior: smooth;
}

.leftBlur {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2.5em;
  background: rgb(244, 244, 244);
  background: linear-gradient(90deg, rgb(42 12 10 / 50%) 0%, rgba(255,255,255,0) 100%);
}

.rightBlur {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2.5em;
  background:rgb(244, 244, 244);
  background: linear-gradient(
    90deg, rgba(255,255,255,0) 0%, rgb(42 12 10 / 50%) 100%);
}

.rightBlur button span, .leftBlur button span {
  font-size: 2em;
  transition: all .8s ease-in-out;
  -moz-transition: all .8s ease-in-out;
  -o-transition: all .8s ease-in-out;
  -ms-transition: all .8s ease-in-out;
}

.contentsContainer .content:first-child {
  margin-left: 2.5em;
}

.contentsContainer .content:last-child {
  margin-right: 2.5em;
}

.content picture, .content a {
  width: inherit;
}

.content picture img {
  border-radius: 2px;
  width: inherit;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.content {
  transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  -ms-transition: all .1s ease-in-out;
}

.contentsContainer .content:hover {
  transform: scale(1.08);
  transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
}
.contentsContainer .content:hover {
  transform: scale(1.09);
}
.contentsContainer .content.small.portrait:hover {
  transform: scale(1.12);
}

.contentsContainer .content.small.landscape:hover {
  transform: scale(1.08);
}
.content:hover picture img {
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

@media (max-width: 768px) {
  .contentsContainer .content:first-child {
    margin-left: 1.2em;
  }
  .contentsContainer .content:last-child {
    margin-right: 1.2em;
  }
  .rightBlur, .leftBlur {
    width: 1.2em;
  }
  .rightBlur button, .leftBlur button {
    display: none;
  }
}
@media (max-width: 340px) {
  .contentsContainer .content:first-child {
    margin-left: 1.1em;
  }
  .contentsContainer .content:last-child {
    margin-right: 1em;
  }
  .rightBlur, .leftBlur {
    width: 1em;
  }
}

/* Section configurations */

.content.portrait {
  width: 138px; 
}
.content.portrait img {
  width: 138px;
  height: 214px;
  max-width: inherit;
}

.content.portrait.big {
  width: 190px;
}
.content.portrait.big img {
  width: 190px;
  height: 294px;
}

.content.landscape {
  width: 180px;
}
.content.landscape img {
  width: 180px;
  height: 116px;
  max-width: inherit;
}

.content.landscape.big {
  width: 290px;
}
.content.landscape.big img {
  width: 290px;
  height: 187px;
}

.content.big h2 {
  font-size: 0.9em;
  margin-top: 4px;
}

.content h2 {
  font-size: 0.8em;
  margin-top: 4px;
}

.content-card {
  background-color: #151515;
  color: white;
}