.slides {
    position: relative;

    &.vineyard {
      min-height: 300px;
      img {
        height: 300px;
      }
    }

    &.house {
      min-height: 400px;
      img {
        height: 400px;
      }
    }

    

    img {
      border-radius: 5px;
      object-fit: cover;
      opacity: 1;
      transition: .15s;
      width: 100%;

      &::selection {
        background: rgba(255,255,255,0);
      }

      &.out {
        opacity: 0;
      }
    }

    .slides-arrow {
      align-items: center;
      background: $white;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      height: 50px;
      justify-content: center;
      left: -25px;
      opacity: 1;
      position: absolute;
      right: auto;
      top: 50%;
      transform: translateY(-50%);
      transition: .15s;
      width: 50px;

      &.out {
        opacity: 0;
        pointer-events: none;
      }

      svg {
        background-color: $light-gray;
        border-radius: 3px;
        color: $white;
        height: 32px;
        padding: 4px;
        pointer-events: none;
        transition: .1s;
        width: 32px;
      }
      
      &:last-child {
        left: auto;
        right: -25px;
      }

      &:hover {
        svg {
          background-color: darken($light-gray, 5%);
          border-radius: 4px;
          transform: scale(1.15);
        }
      }

      &:active {
        svg {
          background-color: darken($light-gray, 10%);
          transform: scale(1.1);
        }
      }
    }
  }