/************Card image ***********

.card-group_bg_image {
  width: 100%;
}
*/


/* layout  styles */

.recommended-accessories.clip-left {
  clip-path: xywh(16px 0px 100% 100% round 50px 0px 0px 50px);
}

.recommended-accessories.clip-right {
  clip-path: xywh(0px 0px calc(100% - 16px) 100% round 0px 50px 50px 0px);
}

.recommended-accessories-content {
  display: flex;
  justify-content:space-between;
  gap: 80px;
  padding: 0 16px;
}

.recommended-accessories-content__intro {
  display:flex;
  flex-direction: column;
  padding-top: 64px;
  justify-content: flex-start;
  width:25%;
}

.recommended-accessories-content__body {
  width:75%;
  position:relative;
  flex-grow: 1;
}

.recommended-accessories-content__body:has(.swiper-wrapper) {
  margin-right: calc(50% - 50vw);
}

.recommended-accessories__item__tags{
  display: flex;
  flex-wrap: wrap;
  gap:4px;
  justify-content: flex-start;
  left:16px;
  position:absolute;
  right:16px;
  top: 16px;

}

.recommended-accessories__item__tags__tag {
  background-color: var(--primary-1);
  border-radius:16px;
  padding: 4px 16px;
  font-size: 0.75rem;
  font-weight: bold;
}
/*
.feature-card-grid--col-1{
  display: grid;
  grid-template-columns: 1fr;
  gap:40px;
}

.feature-card-grid--col-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
}
*/
.feature-card-grid--col-3{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:40px;
}

/*
.feature-card-grid--col-4{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap:20px;
}
*/
/*
@media screen and (max-width: 1279px) {

  .feature-card-grid--col-4{
    grid-template-columns: 1fr 1fr 1fr;
    gap:40px;
  }
  
}
*/



.recommended-accessories-wrapper.swiper {
  display: grid;
  overflow: hidden;
  position: relative;
  /* shorten the width of the carousel..
    width: calc(100% - 100px);
    margin: 0 auto;
  */
}

.recommended-accessories-wrapper--grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.recommended-accessories-wrapper--grid .recommended-accessories__item {
  max-width: 320px;
  width: 100%;
}


/* end layout styles */

.recommended-accessories__item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow:hidden;
  border: 1px solid var(--tertiary-2);
  border-radius: 10px;
}

.recommended-accessories__item:hover { 
  background-color: var(--quaternary-3);
}

.recommended-accessories__item:hover .recommended-accessories__item__title,
.recommended-accessories__item:hover .recommended-accessories__item__body-wrapper,
.recommended-accessories__item:hover .recommended-accessories__item__body-text > span  { 
  color: var(--grey-000);
}

.recommended-accessories__link {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:15;
}

.recommended-accessories__item__image-wrapper {
  padding:0 32px 16px;
  line-height: 0;
  background-color: var(--grey-000);
  height: 320px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.recommended-accessories__item__image{
 /* position: relative;
  overflow: hidden;*/
  /* padding: 0 0 125%; if image postion = absolute */
}

.recommended-accessories__item__image_tag {
  width: 100%;
  height:100%;
  line-height: 0;
  object-fit: cover;
  transition: transform 1s ease-in-out;
}


.recommended-accessories__item__body-wrapper {
  padding: 32px 24px 24px;
  position: relative;
  z-index: 5;
  transition: background-color 0.25s linear;
}
/*
.recommended-accessories__link:hover ~ .recommended-accessories__item__body-wrapper { 
  top: 0;
}
*/

.recommended-accessories__item__body {
  /*
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap:32px;
  height: 100%;
  */
  position:relative;
}

.recommended-accessories__item__body:before{
  content: '';
  display:block;
  width:12px;
  height:12px;
  background-image:url(https://47418537.fs1.hubspotusercontent-na1.net/hubfs/47418537/website-assests/icons/icon-button-secondary.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  position:absolute;
  top:-18px;
  left:0;
}

.recommended-accessories__item__header-wrapper{
  padding:24px 32px;
  position:relative;
  z-index:10;
}



.recommended-accessories__item__title {
  font-size: 1.125rem;
  margin-bottom:2px;
}

.recommended-accessories__item__subtitle {
  font-size: 1rem;
  margin-bottom:2px;

}

.recommended-accessories__item__body-text{
  font-size: 1rem;
}


.recommended-accessories__item__cta-wrapper{
  margin-top: auto;
}

@media screen and (max-width: 1199px) {
  .recommended-accessories-content{
    flex-direction: column;
  }
  .recommended-accessories-content__intro {
    padding-top: 0;
  }
  .recommended-accessories-content__intro,
  .recommended-accessories-content__body{
    width:100%;
  }

  .recommended-accessories-content__body:has(.swiper-wrapper) {
    margin-right: 0;
  }

}

@media screen and (max-width: 959px) {
  
  /*.feature-cars-grid--col-4,*/
  .feature-card-grid--col-3 {,
    grid-template-columns: 1fr 1fr;
    gap:40px 20px;
  }

}

@media screen and (max-width: 559px) {

  /*.feature-card-grid--col-4,
  .feature-card-grid--col-2,*/
    .feature-card-grid--col-3{
    grid-template-columns: 1fr;
    gap:40px;
  }

  .recommended-accessories-wrapper--grid .recommended-accessories__item {
    max-width: none;
  }

  .recommended-accessories__item__image {
    height: 100%;
  }
  
}