.blocks__hosts {
  background-image: linear-gradient(234deg, #fdcc3c 154%, #FF6200 18%);
  padding: 40px;
  overflow: hidden;
  .container {
    max-width: 940px;
  }
  .title {
    h3 {
      font-family: "Roboto";
      font-size: 24px;
      font-weight: bold;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: 0.33px;
      text-align: center;
      color: #fff;
      margin: 0 0 20px 0;
    }
  }
  .hosts_carousel {
    position: relative;
    .owl-stage-outer {
      overflow: hidden;
    }
    .owl-stage {
      display: flex;
      margin: 0 auto;
    }
    .owl-nav {
      position: absolute;
      top: 35%;
      transform: translateY(-50%);
      width: 100%;
      .owl-prev,
      .owl-next {
        border: none;
        background: transparent;
        &:focus,
        &:active {
          outline: none;
        }
      }
      .owl-prev {
        position: absolute;
        left: -50px;
      }
      .owl-next {
        position: absolute;
        right: -50px;
        transform: rotate(180deg);
      }
    }
    .host {
      &:hover {
        h5 {
          color: #666;
        }
      }
      .host_image {
        img {
          display: block;
          max-width: 678px;
          margin: 0 auto;
          width: 100%;
          box-shadow: 0 3px 10px 0 rgba(112, 67, 3, 0.5);
          float: none;
          height: auto;
          border-radius: 0;
        }
      }
      h5 {
        font-family: "Roboto";
        font-size: 18px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.19px;
        color: #fff;
        margin: 10px 0 20px 0;
        text-align: center;
      }
      .host_twitter_account {
        position: relative;
        display: block;
        text-align: center;
        img {
          width: 32px;
          height: 32px;
        }
      }
    }
  }
}

@media screen and (min-width: 1000px) {
  .blocks__hosts {
    .hosts_carousel {
      .host {
        .host_image {
          img {
            object-fit: cover;
            height: 170px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .blocks__hosts {
    .hosts_carousel {
      .owl-nav {
        .owl-prev {
          left: -61px;
          img {
            background-color: rgba(255, 255, 255, 0.5);
          }
        }
        .owl-next {
          right: -61px;
          img {
            background-color: rgba(255, 255, 255, 0.5);
          }
        }
      }
      .host {
        img {
          display: block;
          margin: 0 auto;
          max-width: 167px;
        }
      }
    }
  }
}