#slide {
    .badge {
        width: fit-content;
        display: flex;
        gap: 6px;
        align-items: center;
        padding: 6px 8px 6px 8px;
        z-index: 2;
        border-radius: 250px;
        font-size: 16px;
        color: var(--primary);
        text-transform: uppercase;
        font-weight: 600;
        _background: #3e331b;
        border: 1px solid var(--primary);    
    }  
    
     @media screen and (max-width: 600px) {
        .badge {
            font-size: 12px;
        }
    }

    /* Target tablet range: between 601px and 980px */
    @media screen and (min-width: 601px) and (max-width: 980px) {
        .badge {
            font-size: 15px;
        }
    }   
    
    
    .badge-mobile {
    	display: none;
    }
    
    @media (max-width: 980px) {
        .badge-mobile {
        	display: flex;
        }
        
        .badge-desktop {
            display: none;
        }        
    }  
    
    
    &[data-image-position="right"] {
        .wrap {
            grid-template-columns: 1fr auto;
        }

        .headline {
            order: 1;
        }

        .image {
            order: 2;
        }       
    }

	.wrap {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 100px;
        align-items: center;
        position: relative;
	}

    .headline {
        order: 2;
    }
    
    .text {
    	font-size: 12px;
    }

    .image {
        display: grid;
        gap: 28px;
        order: 1;
        inline-size: 305px;
        overflow-wrap: break-word;
        
         &[data-content-position="top"] {
            img {
            	order: 2;
            }
            
            .image-content {
            	order: 1
            }
        }       
        
        .image-content {
         	display: grid; 
            
            .image-title-content {
                color: var(--primary);
                font-weight: 600;
                font-size: 20px;
                word-wrap: break-word;
                text-align: center;
                line-height: 1.2;
            }

            .image-description-content {
                color: #fff;
                word-wrap: break-word;
                text-align: center;
                line-height: 1.3;
                margin-top: 12px;
            }          	
        }
     
        img {
            display: block;
            height: 100%;
            object-fit: cover;
            width: 100%;
            max-width: 305px;
        }
    }

    .points {
        display: grid;
        gap: 12px;
        
        .item {
            color: var(--light);
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 8px;

            i {
                color: var(--primary);
                margin-right: 6px;
                align-self: auto;
            }
            
            span {
            	line-height: 1.2;
            }
        }
    }
}