.hover-tiles { padding-top:2rem; padding-left: 1rem; padding-right: 1rem;}
.hover-tiles .tiles { display:flex; gap:1rem; min-height:580px; max-width:1140px; margin:0 auto;}
.hover-tiles .tiles .tile-item { display: inline-block; position:relative; background-color:#000; width: 100%; padding:0; overflow: hidden;}
.hover-tiles .tiles .tile-item .header { color: #fff; font: 700 24px / 24px "Titillium Web", RazerF5, Arial, Helvetica, sans-serif; margin-bottom:1rem}
.hover-tiles .tiles .tile-item .subheader { color: #bbbbbb; font: bold 1.125rem/1.375rem Roboto; }
.hover-tiles .tiles .tile-item .copy { padding-bottom:20px; z-index: 1; text-align:left; width: calc(100% / var(--tile-length));}
.hover-tiles .tiles .tile-item .body-copy { padding-top:1rem;}
.hover-tiles .tiles .tile-item .body-copy .link { margin-top: 1rem; text-decoration: none;}
.hover-tiles .tiles .tile-item .body-copy .link a { text-decoration: none; }
.hover-tiles .tiles .tile-item .body-copy .link a:hover { text-decoration: underline; }
.hover-tiles .tiles .tile-item .bgimg:after,
.hover-tiles .tiles .tile-item:after { width: 100%; height: 100%; position: absolute; left: 0; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,1) 100%); z-index: 0; opacity: 0;}
.hover-tiles .tiles .tile-item .bgimg  { height: 100%; width: 100%; z-index: 0; background-position: 50% 0%; background-repeat:no-repeat;}
.hover-tiles .tiles .tile-item.expanded .hidden-copy { opacity:1;}
.hover-tiles .tiles.is-enter .tile-item { padding:0 0px}
/*.hover-tiles .tile-close-btn { width: 30px; height: 30px; border: 1px solid #313131; color: #fff; vertical-align: middle; cursor: pointer; text-align: center; position: absolute; right: 20px; bottom: 20px; background: #ffffff; border-radius: 50%; pointer-events: none; z-index: 2; transition:transform 0.3s ease-out; }
.hover-tiles .tile-close-btn:focus-visible { outline: none; }
.hover-tiles .tiles.is-enter .tile-item.expanded .tile-close-btn { transform: rotate(135deg);}*/
@media only screen and (min-width: 768px){
    .hover-tiles .tiles .tile-item { padding:0 60px; border-radius: 10px; border:1px solid rgb(0 0 0 / 60%); cursor:pointer; transition: padding 0.3s linear; }
    .hover-tiles .tiles .tile-item .bgimg  { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-size: auto 100%;}
    .hover-tiles .tiles .tile-item .copy { position:absolute; left:1rem; bottom:0; max-width:230px; }
    .hover-tiles .tiles.tiles-2 .tile-item .copy { max-width:400px; }
    .hover-tiles .tiles .tile-item .hidden-copy { opacity:0; transition: height 0.3s ease, opacity 0.2s ease 0.1s;}
    .hover-tiles .tiles .tile-item:not(.expanded) .hidden-copy { height:0!important;}
    .hover-tiles .tiles .tile-item:after { content: " "; transition: opacity 0.3s ease;}
    .hover-tiles .tiles.tiles-3 .tile-item .copy { max-width:300px;}
    .hover-tiles .tiles.is-enter .tile-item.expanded { padding:0 60px }
    .hover-tiles .tiles.is-enter .tile-item.expanded:after { opacity: 1; }
}
@media only screen and (max-width: 768px){
    .hover-tiles .tiles { flex-direction: column; }
    .hover-tiles .tiles .tile-item { display: grid; grid-template-rows: 300px max-content;}
    .hover-tiles .tiles .tile-item .bgimg { grid-row: 1 / -1; grid-column: 1 / -1; background-size: 100% auto; }
    .hover-tiles .tiles .tile-item .copy { width: auto!important; padding: 0 20px 20px; grid-row: 2; grid-column: 1 / -1;}
    .hover-tiles .tiles .tile-item .hidden-copy { height: auto!important}
    .hover-tiles .tiles .tile-item .subheader { margin-top:0;}
    .hover-tiles .tiles .tile-item .bgimg:after { content: " "; opacity: 0.8!important; }
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
    .hover-tiles { padding-right: 0rem;}
    .hover-tiles .tiles { flex-wrap: wrap; flex-direction: row; }
    .hover-tiles .tiles .tile-item { width: calc(50% - 1rem); }
}
.razer-rtl .hover-tiles .tiles .tile-item .copy { text-align:right; left: auto; right: 1rem;}