.container-fluid.myContent {
        border: 12px #efefef solid;
    }
    .container-fluid.myContent .imgContainer {
        padding: 0px;

    }
    .container-fluid.myContent .imgContainer img {
        width: 100%;
        
    }

    .container-fluid.myContent .textContainer {
        text-align: center;
    }

    .title-mention {
        color: #000;
        font-weight: bold;
        text-align: center;
        font-size: 14px;
        line-height: 14px;
        position: relative;
        padding-bottom: 26px;
        padding-top: 10px;
        text-transform: uppercase;
        font-family: gotham ssm medium a,gotham ssm medium b,Helvetica,Arial,sans-serif;
        padding-bottom: 10px;
    }

    .title {
        margin: 0;
        padding: 0;
        font-size: 30px;
        line-height: 50px;
        font-family: ClarinsRegular;
        font-weight: bold;
        text-align: center;
        display: block;
        position: relative;
        padding-bottom: 5px;
    }

    .text-content {
        margin: 0;
        text-align: center;
        font-size: 16px;
        line-height: 26px;
        position: relative;
        padding-bottom: 36px;
        padding-top: 5px;
    }

    .container-fluid.myContent .content-cta {
        margin: 40px 10px 10px 10px;
        font-size: 15px;
        padding: 15px;
        display: inline-block;
        min-width: 120px;
        font-weight: normal;
        text-align: center;
        text-transform: uppercase;
        font-family: "Gotham SSm medium A", "Gotham SSm medium B", Helvetica, Arial, sans-serif;
        color: #fff;
        line-height: 1em;
        background-color: #000;
    }

    .s-mention {
        font-size: 13px;
        margin-left: 0px;
        margin-right: 0px;
        padding-top: 10px;
        color: #8b8b8b;
    }


    .container-fluid.myContent .plp{
        border: 1px solid #cfcac9;
        padding-left: 10px;
        padding-right: 10px;
    }
    .container-fluid.myContent .plp:hover {
        box-shadow: 0 0 10px 0 rgb(0 0 0 / 15%);  
    }
    .container-fluid.myContent .plp a:hover {
        color: #000;
    }
    .container-fluid.myContent .plp .ProductName{
        word-break: break-word;
        color: #333;
        margin-bottom: 10px;
        font-family: var(--font-medium, "Gotham SSm medium A", "Gotham SSm medium B", Helvetica, Arial, sans-serif);
        font-size: 14px;
        letter-spacing: .0196px;
        line-height: 17px;
    }
    .container-fluid.myContent .plp .ProductSize{
       font-family: var(--font-book, "Gotham SSm book A", "Gotham SSm book B", Helvetica, Arial, sans-serif);
       font-size: 11px;
       letter-spacing: .011px;
       line-height: 14px;
       font-weight: 500;
       color: #787474;
    }
    .container-fluid.myContent .plp .ProductPrice{
      font-family: var(--font-medium, "Gotham SSm medium A", "Gotham SSm medium B", Helvetica, Arial, sans-serif);
      font-size: 11px;
      font-weight: 500;
    }

    .container-fluid.myContent .plp img.Packshot{
        width: 100%;
    }

    
    .container-fluid.myContent .plp .hoverBox{
        background-color: #fff;
        display: none;
        transition: 1s;
    }
   
   
    .container-fluid.myContent .plp .hoverBox .ProductDescription{
        font-family: var(--font-book, "Gotham SSm book A", "Gotham SSm book B", Helvetica, Arial, sans-serif);
        font-size: 14px;
        letter-spacing: 0px;
        line-height: 20px;
        text-align: left;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 4;
    }
   
    #primary > div > div.container-fluid.myContent > div.plpContainer > div > div > div > div {
    background-color: #b40024;
    border: 2px solid #b40024;
    color: #fff;
    height: 44px;
    width: 100%;
    min-width: 104px;
    border-radius: 5px;
    font-family: var(--font-medium, "Gotham SSm medium A", "Gotham SSm medium B", Helvetica, Arial, sans-serif);
    font-size: 14px;
    letter-spacing: 0px;
    line-height: 20px;
}
    #primary > div > div.container-fluid.myContent > div.plpContainer > div > div > div > div > a { 
    color: #fff;
}

  .container-fluid.myContent .plpContainer{
  margin-top: 30px;
  margin-bottom: 30px;
  }

@media (min-width: 1200px) {
    .container-fluid.myContent .plpContainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 41px;
    }

    .container-fluid.myContent .plp:hover > div.hoverBox{    
        display: block;
        transition: 1s;
    }

    .container-fluid.myContent .plp:hover > a > div.contentBox{    
        display: none;
        transition: 1s;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .container-fluid.myContent .plpContainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 41px;
    }

    .container-fluid.myContent .plp:hover > div.hoverBox{    
        display: block;
    }
}

@media (min-width: 1024px) and (max-width: 1024px) {
    .container-fluid.myContent .plpContainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 41px;
    }
    .container-fluid.myContent .plp:hover > div.hoverBox{    
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .container-fluid.myContent .plpContainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 41px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .container-fluid.myContent .plpContainer{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 41px;
    }
}

@media (max-width: 575.98px) {
     .container-fluid.myContent .plpContainer{
     margin-top: 30px;
     display: grid;
     grid-template-columns: 1fr 1fr;

     }
}

@media (min-width: 414px) and (max-width: 414px) {}

@media (min-width: 375px) and (max-width: 375px) {}

@media (min-width: 320px) and (max-width: 320px) {}