.block-services {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 100px 0;

  & > .container {
    display: flex;
    flex-direction: column;
    gap: 50px;

    @media (min-width: 576px) {
      flex-direction: row;
    }
  }
  
  h2 {
    font-size: var(--font-size-larger);
    font-weight: var(--font-weight-light);
    margin: 0;

    @media (min-width: 576px) {
      width: calc(100% / 12 * 3);
    }

    em {
      font-style: normal;
      font-weight: var(--font-weight-bold);
      margin: 0;
    }
  }
}

.block-services-carousel {
  @media (min-width: 576px) {
    width: calc(100% / 12 * 9);
  }
}


.block-services-action {
  margin-top: 10px;
  margin-left: -20px;
  display: flex;

  .block-services-next, .block-services-prev {
    padding: 10px;
    cursor: pointer;

    &:hover {
      svg {
        path {
          fill: var(--color-secondary);
        }
      }
    }
  }
  svg {
    width: 50px;
    height: 100%;
  }
}

.block-services-service {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--color-secondary);

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: center center;
  }

  &:hover {
    .block-services-service-content {
      top: 0;
      background-color: rgba(146,137,83,1);
    }

    .redactor {
      opacity: 1;
      transition: opacity 500ms ease-in;
      transition-delay: 500ms;
    }
  }
}

.block-services-service-content {
  position: absolute;
  z-index: 2;
  top: 75%;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(146,137,83,0.6);
  padding: 10px;
  transition: top 500ms ease-in-out;
  pointer-events: none;

  h3 {
    font-size: 24px;
    font-weight: var(--font-weight-regular);
    margin: 0;
  }

  .redactor {
    font-size: 18px;
    line-height: 1.75rem;
    opacity: 0;
    transition: 200ms;
  }
}

.block-services-cta {
  margin-top: 50px;

  .container {
    display: flex;

    @media (min-width: 576px) {
      justify-content: flex-end;
    }
  }
}