#content-image {
    &[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;
    }

    .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;
            }
        }
    }
}