.background-slider {
    background: var(--primary-color)
}

.container-slider {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 545px;
}

.container-slider > div {
  flex: 0 0 23%;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  box-shadow: 1px 5px 15px var(--primary-color);
  position: relative;
  overflow: hidden;
}

.container-slider > div:nth-of-type(1) {
  background: url("/images/maritime/slider-portstream.webp") no-repeat 50%/cover;
}

.container-slider > div:nth-of-type(2) {
  background: url("/images/maritime/slider-seastream.webp") no-repeat 50%/cover;
}

.container-slider > div:nth-of-type(3) {
  background: url("/images/maritime/slider-satstream.webp") no-repeat 50%/cover;
}

.container-slider > div:nth-of-type(4) {
  background: url("/images/maritime/slider-shipbook.webp") no-repeat 50%/cover;
}

.container-slider > div .content {
  font-size: 1.5rem;
  color: #fff;
  display: flex;
  align-items: start;
  padding: 25px;
  opacity: 0;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  background: #ffffff;
  color: var(--primary-color);
  padding: 40px;
  
  /* background: linear-gradient(0deg, rgba(2, 2, 46, 0.6755077031) 0%, rgba(255, 255, 255, 0) 100%); */

  transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
  visibility: hidden;
}

.container-slider > div .content span {
  display: block;
  margin-top: 5px;
  font-size: 1rem;
}

.container-slider > div:hover {
  flex: 0 0 34%;
}

.container-slider > div:hover .content {
  opacity: 0.8;
  transform: translatey(0%);
  visibility: visible;
}