.design-tile {
    position: relative;
    display: block;
    overflow: hidden;
}

.design-tile img {
    display: block;
    width: 100%;
    object-fit: cover;
    opacity: 0.9;
    filter: grayscale(0.05);
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.design-tile:hover img,
.design-tile:focus-visible img {
    transform: scale(1.02);
    opacity: 1;
    filter: grayscale(0);
}

.design-tile::after {
    content: "";
    position: absolute;
    right: clamp(10px, 1.6vw, 22px);
    bottom: clamp(10px, 1.6vw, 22px);
    width: clamp(32px, 3.2vw, 44px);
    aspect-ratio: 1;
    background: #fff;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M22 0a22 22 0 1 0 0 44a22 22 0 1 0 0-44ZM20.5 11h3v9.5H33v3h-9.5V33h-3v-9.5H11v-3h9.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath fill-rule='evenodd' d='M22 0a22 22 0 1 0 0 44a22 22 0 1 0 0-44ZM20.5 11h3v9.5H33v3h-9.5V33h-3v-9.5H11v-3h9.5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.design-tile:hover::after,
.design-tile:focus-visible::after {
    opacity: 1;
}

.design-tile .tile-title {
    position: absolute;
    top: clamp(10px, 1.6vw, 22px);
    left: clamp(12px, 3.2vw, 44px);
    right: clamp(16px, 4vw, 56px);
    color: #fff;
    text-align: left;
    font-family: inherit;
    font-size: 1.8em;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.design-tile:hover .tile-title,
.design-tile:focus-visible .tile-title {
    opacity: 1;
}

@media (max-width: 568px) {
    .design-tile .tile-title {
        top: 20px;
        left: 20px;
        right: 20px;
    }
}