.cmp-pc {
  margin:46px 0;
}

@media (max-width:1320px) {
  .cmp-pc {
  padding-left: 20px;
  }
}

@media (min-width:768px) and (max-width:1320px) {
  .cmp-pc {
  padding-right: 20px;
  }
}

.cmp-pc__header h1 {
  font-size: 40px;
  line-height:44px;
  margin:0;
}

.cmp-pc__header h2 {
  font-size:40px;
  line-height:44px;
  margin:0;
}

@media (max-width:1024px) {
.cmp-pc__header h2 {
  font-size:32px;
  line-height:35.2px;
}  
}

.cmp-pc__header p {
  font-size:24px;
  line-height:28.13px;
}

@media (max-width:1024px) {
  .cmp-pc__header p {
    font-size:20px;
    line-height:25.56px;
  }
}


.cmp-pc__items {
  display:flex;
}

@media (max-width:1024px) {
  .cmp-pc__items {  
    flex-wrap:wrap;
    justify-content: space-between;
  }
}

/* enable Flickity by default */
.js-cmp-pc__mobile-carousel:after {
  content: 'flickity';
  display: none; /* hide :after */
}

@media screen and ( min-width: 768px ) {
  /* disable Flickity for large devices */
  .js-cmp-pc__mobile-carousel:after {
    content: '';
  }
}

@media (max-width:767px) {
  .cmp-pc__items {  
    display:block;
  }
}

.cmp-pc__item {
  flex:1;
  margin-right:32px;
  background-color:#fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width:1024px) {
  .cmp-pc__item {
    flex: none;
    margin-right: 0;
    width: calc(50% - 16px);
    margin-bottom: 32px;
  }
}

@media (max-width:767px) {
  .cmp-pc__item {
    width: 80%;
    margin: 0 5%;
  }
  .cmp-pc__item.cmp-pc__item--fullbleed  {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .cmp-pc__item.cmp-pc__item--fullbleed > a {
    position: absolute;
    right: 0;
    left: 0;
  }
}
.js-cmp-pc__mobile-carousel.flickity-enabled .cmp-pc__item.cmp-pc__item--fullbleed {
  background-repeat: no-repeat;
  background-size: cover;
}
.cmp-pc__item.cmp-pc__item--fullbleed {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color:#fff;
  min-height:700px;
  position:relative;
  cursor: pointer;
}

.cmp-pc__item.cmp-pc__item--fullbleed:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(0,0,0,0.3);
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5298494397759104) 99%);
}
.cmp-pc__item.cmp-pc__item--fullbleed > a {
  display: flex;
  align-items: flex-end;
  height: 100%;
  text-decoration: none;
}
.js-cmp-pc__mobile-carousel.flickity-enabled .cmp-pc__item--link-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.cmp-pc__item:last-child {
  margin-right:0;
}

.cmp-pc__item img {
  width:100%;
}

.cmp-pc--imageontop .cmp-pc__image, .cmp-pc--imageontop .cmp-pc__video {
  display:flex;
  margin: -32px -32px 0 -32px;
  position: relative;
  overflow: hidden;
}

.cmp-pc--imageontop .cmp-pc__video video, .cmp-pc__item--fullbleed .cmp-pc__video video{
  position: absolute;
  max-height: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cmp-pc__item--fullbleed .cmp-pc__video{
  position: absolute;
  overflow: hidden;
}

.cmp-pc__item--fullbleed .cmp-pc__video video{
  overflow: hidden;
  min-height: 100%;
}

.cmp-pc__content-top {
    background-color: #fff;
    padding: 32px 32px 0 32px;
}

.cmp-pc__content-bottom {
    background-color: #fff;
    padding: 0px 32px 32px 32px;
}

.cmp-pc__content-box {
  background-color:transparent;
  z-index:1;
  padding:32px;
  width: 100%;
}

.cmp-pc__content-box h3,
.cmp-pc__content-top h3 {
    margin: 0 0 16px;
    font-size:32px;
    line-height: 1;
}

.cmp-pc__content-top h3 {
  margin-top:32px;
}
.cmp-pc__item--fullbleed .cmp-pc__text {
  margin-bottom: 2rem;
}

.cmp-pc__eyebrow {
    margin-bottom: 0.5em;
}

.cmp-pc--imageontop .cmp-pc__eyebrow {
    transform: translateY(1.5em);
}

.cmp-pc__item a.b-button,
.cmp-pc__item a span.b-button {
    margin-top: 1rem;
    width: 100%;
	padding: 0;
}

.cmp-pc__item--fullbleed a.b-button,
.cmp-pc__item--fullbleed a span.b-button {
  background: no-repeat linear-gradient(#6bbcb9, #6bbcb9),linear-gradient(#ffffff, #ffffff);
  background-size: 0 100%,100%;
  color: #222
}

.cmp-pc__item--fullbleed a.b-button:hover,
.cmp-pc__item--fullbleed a span.b-button:hover {
  background-size:100% 100%,0
}