.root {
    position: relative;
    display: flex;
    width: 100%;
    color: var(--color-text-primary-inverted);
    background: lightgray 50% / cover no-repeat;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: inherit;
        background-size: cover;
        z-index: 0;
        transition: transform 0.3s ease-in-out;
        transform: scale(1);
    }

    &:hover::before,
    &:focus::before {
        transform: scale(1.05);
    }
}

.primary {
    max-width: 100%;
    width: 100%;
    height: 398px;
    align-items: flex-end;
    border-radius: var(--border-radius-lg);
}

.secondary {
    max-width: 100%;
    width: 100%;
    height: 147px;
    align-items: center;
    border-radius: var(--border-radius-md);
}

.smoke {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: blur(5.5px);
    mix-blend-mode: screen;
    background: lightgray -44.215px 0 / 114.84% 100% no-repeat;
    transition: opacity 0.3s ease-in-out;

    &[data-smoke='orange'] {
        background: url('./assets/smoke-1.jpg') lightgray 50% / cover no-repeat;
    }

    &[data-smoke='blue'] {
        background: url('./assets/smoke-2.jpg') lightgray 1.232px 0 / 114.84% 100% no-repeat;
    }

    &[data-smoke='red'] {
        background: url('./assets/smoke-3.jpg') lightgray -44.215px 0 / 114.84% 100% no-repeat;
    }
}

.root:hover .smoke,
.root:focus .smoke {
    opacity: 0.2;
}

.content {
    z-index: 1;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: inherit;
    gap: var(--spacing-16);
}

.primary .content {
    padding: var(--spacing-32);
}

.secondary .content {
    padding: var(--spacing-48) var(--spacing-16);
}

.label {
    width: 100%;
    max-width: 142px;
}

.mobile {
    display: none;
}

@media screen and (width <= 768px) {
    .primary {
        width: 100%;
        height: 245px;
    }

    .secondary {
        width: 100%;
        height: 80px;
    }

    .primary .content {
        padding: var(--spacing-20) var(--spacing-12);
    }

    .secondary .content {
        padding: var(--spacing-24) var(--spacing-12);
    }

    .label {
        max-width: 100%;
    }

    .mobile {
        display: flex;
    }

    .desktop {
        display: none;
    }
}