.checkbox-card {
    border-radius: .5rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color-primary);
}

.checkbox-card__header {
    display: flex;
    padding: 1rem;
    border-radius: .5rem;
    border: 1px solid var(--border-color);
    position: relative;
    margin: -1px;
    align-items: center;
    background-color: var(--bg-color-secondary);
    transition: border-color .2s ease-out;
}

.checkbox-card__header:hover,
.checkbox-card__header:focus {
    border-color: var(--color-accent);
    transition-duration: 0s;
}

.checkbox-card__checkbox {
    margin-right: .5rem;
}

.checkbox-card__checkbox:focus {
    outline: transparent;
}

.checkbox-card__label {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
}

.checkbox-card__title {
    font-weight: 500;
    color: var(--text-color-primary);
}

.checkbox-card__content {
    display: flex;
    flex-direction: column;
    border-radius: .5rem;
    padding: 1rem;
    gap: 1rem;
    background-color: var(--bg-color-primary);
}

.checkbox-card__image-container {
    width: fit-content;
    border-radius: .5rem;
    padding: .5rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color-secondary);
}

.checkbox-card__image {
    display: block;
    border-radius: .5rem;
    margin-bottom: .25rem;
}

.checkbox-card__field-label {
    font-size: 1rem;
    color: var(--text-color-primary);
}

.checkbox-card__inner {
    flex-grow: 1;
}

.checkbox-card__inner > :not(:last-child) {
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .checkbox-card__content {
        flex-direction: row;
    }
}