/* 
  view-site-search.css

  The style definitions for View Site-Search.

  Revision: 1.0
  Date: 2023-03-03
  Auther: Charles Sun (charles.sun@montage-tech.com)
  Copyright: Montage Technology Co. Ltd
 */

@import '../variables.css';


/*** Carousel ***/

/* Banner block (carousel) in Featured Top region shall be centered */
.featured-top .block {
  margin-left: auto;
  margin-right: auto;
}

/* paragraph block shall fullfill screen width in feature-top   */
/* remove container-fluid class and paddings in .paragraph__column */
.featured-top .paragraph__column {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0;
}

/* Carousel image shall be responsive */
/* Carousel images shall be 2x in a small display */
.carousel-item .field--type-image img {
  width: 200%;
  height: auto;
}
/* adjust the visible image area in the small display */
.carousel-item div.focus-left img {
  margin-left: 0;
}
.carousel-item div.focus-middle img {
  margin-left: -50%;
}
.carousel-item div.focus-right img {
  margin-left: -100%;
}
/* reset to normal mode in a wide display */
@media (min-width: 768px) {
  .carousel-item .field--type-image img {
    width: 100%;  
  }

  .carousel-item div.focus-left img,
  .carousel-item div.focus-middle img,
  .carousel-item div.focus-right img {
    margin-left: 0;
  }
}

/*** Products and Solutions ***/

/* Add shadow and border on the column blocks in the HOME page */
@media (min-width: 768px) {
  .paragraph--id--514 > .paragraph__column {
      display: flex;
      flex-wrap: wrap;
  }

  .paragraph--id--514 > .paragraph__column  > .paragraph--type--bp-columns__4col {
      display: flex;
  }

  .paragraph--id--514 > .paragraph__column  > .paragraph--type--bp-columns__4col > div {
      background-color: white;
      box-shadow: 1px 1px 5px 3px lightgray;
      border-radius: 5px;
      overflow: hidden;
  }

  .paragraph--id--514 > .paragraph__column  > .paragraph--type--bp-columns__4col > div > div > div > div:nth-child(2) {
      padding-left: 10px;
      padding-right: 10px;
  }
}

@media (min-width:768px) and (max-width:991px) {
  .paragraph--id--514 > .paragraph__column  > .paragraph--type--bp-columns__4col {
      float: left;
      width: 50%;
      margin-bottom: 30px;
  }
}