/* Hot Buttons */
.hot-buttons {display: grid;grid-template-columns: repeat(4, 1fr);gap: 2.5rem;list-style: none;padding: 0;margin: 2.5rem;}
.hot-buttons li {background-color: #f5f5f5;position: relative;aspect-ratio: 1 / 1;overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;cursor: pointer;}
.hot-buttons li:hover {transform: scale(1.01);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);}
.hot-buttons a {width: 100%;height: 100%;display: block;text-decoration: none;color: inherit;position: relative;}
.hot-buttons img {width: 100%;height: 100%;display: block;object-fit: cover;transition: transform 0.3s ease;}
.hot-buttons span.title {width: 90%;display: inline-flex;padding: clamp(0.5em, 2vw, 1.5em) clamp(0.2em, 2vw, 1.5em);align-items: center;justify-content: center;background-color: #b2bb1c;color: #000000;font-size: clamp(0.7em, 1vw, 1.1em);line-height: normal;text-transform: uppercase;font-family: "Raleway", sans-serif;font-weight: bold;position: absolute;bottom: 0;right: 0;box-sizing: border-box;transition: background-color 0.3s ease;overflow: hidden;z-index: 1;}
.hot-buttons span.title::after {width: clamp(0.8em, 2vw, 1.25em);height: auto;aspect-ratio: 4 / 3;display: inline-block;margin-left: 10px;content: "";background-image: url("../images/hot-button-arrow.png");background-size: contain;background-repeat: no-repeat;position: relative;z-index: 2;}
.hot-buttons span.title::before {width: 0%;height: 100%;content: "";background-color: #fff;position: absolute;top: 0;left: 0;transition: width 0.4s ease;z-index: -1;}
.hot-buttons a:hover span.title::before {width: 100%;}
@media (max-width: 768px) {
  .hot-buttons {grid-template-columns: repeat(2, 1fr);}
}

/* In-Edit-Mode Adjustments */
.hot-buttons.ineditmode {width: calc(100% - 5rem);display: block;}
.hot-buttons.ineditmode div[data-container="block"] {max-width: 25%;padding: 20px;box-sizing: border-box;float: left;}