.bento {
    .col {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .card{ 
        position: relative;
        height: 100%;
        overflow: hidden;

        &:hover {
            transition: all 0.2s ease-in-out;
            transform: scale(1.015);
            box-shadow: 2px 6px 21px rgba(0, 0, 0, 0.4);
        }

        .card-body {
            position: relative;
        }
        
        .image-background {
            position: absolute;
            bottom: -1px;
            right: 1px;
            width: auto;
            z-index: 0; 
            opacity: 0.3;
            height: 50%;
            pointer-events: none;
            
            @media (max-width: 684px) {
                opacity: 0.1;
            }
        }
        .image-background-icon {
            position: absolute;
            bottom: 0;
            right: 0;
            transform: rotate(10deg);
            width: auto;
            z-index: 0;
            opacity: 0.1;
            height: 50%;
            pointer-events: none;
        }

        &.infos {
            .card-body {
                position: relative;
                display: flex;
                align-items: start;
                justify-content: start;
                flex-direction: column;

                .title {
                    font-weight: 700 !important;
                    margin-bottom: 16px;
                }

                .date {
                    color: rgba(var(--red-primary), var(--text-opacity));
                    font-size: 18px;
                    font-weight: 700;
                    margin-top: auto;
                }

                .address {
                    font-size: 16px;
                    font-weight: 500;
                }
                }
        }
        &.dates {
            .date {
                background-color: transparent;
            }
        }

        &.addresses {
            .address {
                background-color: transparent;
            }
        }

        &.image {
            padding: 0;
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        &.privacy-and-price {}

        &.about {
        }


        .icons {
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 10px;

            .icon {
                height: 20px;
                width: auto;
            }
        }
    }
}