.card-collection-block{
    display:flex;
    position:relative;
    justify-content:center;
}

/* Fix vertical stacking */
.card-collection-block .slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
}

.card-collection-block .slick-list {
  height:100%;
  overflow: hidden;
  margin: 0 -8px;
  padding: 0;
}

.card-collection-block .slick-track {
  height:100%;
  align-items: stretch;
}

.card-collection-block .slick-slide {
    display:flex;
  float: none;
  height: auto;
  min-height: 1px;
  padding: 0 8px;
}

.card-collection-block .slick-slide > :first-child {
    height:100%;
    position:relative;
    width:100%;
}


.card-collection-block .content-width{
    flex-direction:column;
    padding:72px 0;
}

.card-collection-block.vertical-padding .content-width{
    padding:72px 0;
}

.card-collection-block .bg-container{
    height:100%;
    left:50%;
    max-width:1440px;
    position:absolute;
    top:0;
    transform:translate3d(-50%, 0, 0);
    width:100%;
}

.card-collection-block .bg-container .bg{
    height:100%;
    position:absolute;
    right:0;
    top:0;
    width:100vw;
}

.card-collection-block .head{
    position:relative;
}

.card-collection-block .head .title-container{
    align-items:flex-start;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:30px;
    padding-bottom:56px;
}

.card-collection-block .head .title{
    display:flex;
    font-size:30px;
}

.card-collection-block .head .cta{
    padding:10px 25px;
}

.card-collection-block .body .container.carousel{
    gap:16px;
    height:435px;
    width:100%;
}

.card-collection-block a.card,
.card-collection-block a.card:active,
.card-collection-block a.card:visited{
    color:white;
    display:flex;
    height:100%;
    opacity:0;
    overflow:hidden;
    position:relative;
    transform:translate3d(0, 25%, 0);
    transition:800ms transform, 800ms opacity;
    width: 100%;
}

.card-collection-block a.card.animated,
.card-collection-block a.card.animated:active,
.card-collection-block a.card.animated:visited{
    opacity:1;
    transform:translate3d(0, 0, 0);
}

.card-collection-block a.card:after{
    background: linear-gradient(to bottom,  rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.5) 100%); 
    content:'';
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

.card-collection-block a.card.type-gallery:after{
    transition:1200ms opacity;
}

.card-collection-block a.card.type-gallery:hover:after{
    opacity:0.3;
    transition:250ms opacity;
}

.card-collection-block a.card .bg{
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

.card-collection-block a.card .card-content{
    display:flex;
    flex-direction:column;
    height: calc(100% - 72px);
    justify-content:end;
    margin-left:30px;
    margin-top:36px;
    position:relative;
    width: calc(100% - 60px);
    z-index:1;
}

.card-collection-block a.card .card-content .hover-prompt{
    display:flex;
    justify-content:space-between;
    margin-bottom:auto;
    margin-top:0;
    opacity:1;
    pointer-events:none;
}

.card-collection-block a.card .card-content .hover-prompt p{
    font-size:16px;
    line-height:1.5;
}

.card-collection-block a.card .card-content .title{
    font-size:20px;
    line-height:1.3;
}

.card-collection-block a.card .card-content .subtext{
    font-size:16px;
    margin-top:30px;
}

.card-collection-block .subnav{
    display:none;
}

.card-collection-block .body.carousel .subnav{
    display:flex;
    gap:5px;
    margin-top:40px;
}

.card-collection-block .body.carousel .subnav .slash{
    aspect-ratio:1.25 / 1;
    height:18px;;
    position:relative;
}

.card-collection-block .body.carousel .subnav .slash:before{
    background:#1A3868;
    content:'';
    height:2px;
    position:absolute;
    top:50%;
    transform:rotate(-65deg);
    width:100%;
}

.card-collection-block .body.carousel .subnav .arrow{
    display:flex;
    color:#1A3868;
    cursor:pointer;
    gap:5px;
}

.card-collection-block .body.carousel .subnav:has(.arrow.slick-hidden){
    display:none;
}

.card-collection-block .body.carousel .subnav .arrow.slick-disabled{
    opacity:0.2;
    pointer-events:none;
}

.card-collection-block .body.carousel .subnav .arrow.prev .icon svg{
    transform:rotate(180deg);
}


.card-collection-block .body .container.grid{
    display:grid;
    grid-template-columns: repeat(1, 1fr);
    gap:16px;
}


.card-collection-block .body .container.grid a.card{
    height:435px;
}

/**
6-GRID CAROUSEL
**/
.card-collection-block[data-carousel-two-row="true"] .body .container.carousel{
    height:auto;
}

.card-collection-block[data-carousel-two-row="false"] .slick-track {
  display: flex !important;
}

/* Gutters */
.card-collection-block[data-carousel-two-row="true"] .slick-list { 
    margin: 0 -8px; 
}
.card-collection-block[data-carousel-two-row="true"] .slick-slide {
    display:grid;
    float:left;
    gap:16px;
    padding: 0 8px; 
}

/* Make cards fill their cell */
.card-collection-block[data-carousel-two-row="true"] .slick-slide > div {
  display: flex;
  height: 100%;
    gap:16px;
}

.card-collection-block[data-carousel-two-row="true"] .slick-slide > div > a.card {
  width: 100%;
  height: 435px;
}


@media screen and (min-width:501px){
    .card-collection-block .body .container.grid{
        grid-template-columns: repeat(2, 1fr);
    }

    .card-collection-block .container.carousel.triple a.card.remainder{
        width:calc(50% - 11px) !important;
    }
}

@media screen and (min-width:850px){

    .card-collection-block .content-width{
        padding:112px 0;
    }

    .card-collection-block.vertical-padding .content-width{
        padding:112px 0;
    }
    

    .card-collection-block .head .title-container{
        align-items:flex-end;
        flex-direction:row;
        gap:unset;
        padding-bottom:100px;
    }

    .card-collection-block .head .title{
        font-size:34px;
    }

    .card-collection-block .body .container{
        flex-direction:row;
    }

    .card-collection-block .body .container.double a.card,
    .card-collection-block .body .container.double a.card:active,
    .card-collection-block .body .container.double a.card:visited{
        width:100%;
    }

    .card-collection-block .body .container.triple a.card,
    .card-collection-block .body .container.triple a.card:active,
    .card-collection-block .body .container.triple a.card:visited{
        width:100%;
    }

    .card-collection-block .body .container.quad a.card,
    .card-collection-block .body .container.quad a.card:active,
    .card-collection-block .body .container.quad a.card:visited{
        width:100%;
    }

    .card-collection-block a.card .bg{
        transition:1200ms transform;
    }

    .card-collection-block a.card:hover .bg{
        transform:scale(1.1);
        transition:250ms transform;
    }

    .card-collection-block a.card .card-content .hover-prompt{
        opacity:0;
        transition:1200ms opacity;
    }

    .card-collection-block a.card:hover .card-content .hover-prompt{
        opacity:1;
        transition:250ms opacity;
    }

    .card-collection-block .body.carousel .subnav .arrow{
        transition:1200ms color;
    }

    .card-collection-block .body.carousel .subnav .arrow:hover{
        color:#d1141e;
        transition:250ms color;
    }

    .card-collection-block .body.carousel .subnav .arrow .icon svg path{
        transition:1200ms fill;
    }

    .card-collection-block .body.carousel .subnav .arrow:hover .icon svg path{
        fill:#d1141e;
        transition:250ms fill;
    }

    .card-collection-block .body .container.grid.quad,
    .card-collection-block .body .container.grid.triple{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width:900px){

    .card-collection-block .body .container.grid.quad{
        grid-template-columns: repeat(4, 1fr);
    }
    .card-collection-block a.card .card-content .title {
        font-size:22px;
    }

    .card-collection-block a.card .card-content .subtext{
        font-size:18px;
        margin-top:30px;
    }

    .card-collection-block .container.carousel.triple a.card.remainder{
        width:calc(33.3% - 11px) !important;
    }
}

@media screen and (min-width:1440px){
    
}