.block.basiccontentblock .image + .description {
    margin-top: 1em;
}
.basiccontentblock {
    .title h2 {
        margin-top: 0;
        color: var(--brand-color);
    }

    &.button-right,
    &.button-left {
        .basic {
            display: grid;
            grid-template-columns: subgrid;
        }
    }
    .basic .button {
        align-self: start;
        justify-self: center;

        a.bttn {
            margin: 0 0 1em 0;
            font-size: 18px;
        }
    }
    &.button-right .basic  {
        @media (max-width: 1250px) {
            padding-right: 0;
        }

        > * {
            grid-column: 1 / 7;
        }
        .button {
            grid-column: 7 / 11;

            @media (max-width: 1250px) {
                align-self: start;
            }
        }
    }
    &.button-left .basic  {
        @media (max-width: 1250px) {
            padding-left: 0;
        }

        > * {
            grid-column: 5 / 11;
        }
        .button {
            grid-column: 1 / 6;

            @media (max-width: 1250px) {
                align-self: start;
            }
        }
        
            
    }
    &.center .basic > * {
        justify-self: center;

    }
}

@media (max-width: 1000px) {
    .basiccontentblock .title h2 {
       font-size: 34px;
    }

    .basiccontentblock .description p {
        font-size: 14px;
    }

    .basiccontentblock.button-left .basic .button a.bttn,
    .basiccontentblock.button-right .basic .button a.bttn {
        font-size: 16px;
     }
}


@media (max-width: 817px) {
	
    .basiccontentblock .title h2 {
       font-size: 32px;
    }

    .basiccontentblock .description p {
        font-size: 14px;
    }

    .basiccontentblock.bg-color .basic {
        padding: 2.5em 0;
    }

    .basiccontentblock.button-left,
    .basiccontentblock.button-right {
       .basic {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto;

            
            .button {
                grid-column: 1 / 1;
                align-self: center;
                justify-self: center;    
                  
                a.bttn {
                    margin: 1.5em;
                    font-size: 16px;
                }      
            }
        }
    }


}

@media (max-width: 676px) {
	
    .basiccontentblock .title h2 {
       font-size: 30px;
    }

    .basiccontentblock .description p {
        font-size: 14px;
    }

    .basiccontentblock.bg-color .basic {
        padding: 2em;
    }

     .basiccontentblock.button-left .basic .button a.bttn,
     .basiccontentblock.button-right .basic .button a.bttn {
        font-size: 14px;
     }

}

@media (max-width: 400px) {
     .basiccontentblock.button-left .basic,
     .basiccontentblock.button-right .basic {
        padding: 1em;
    }

}
/* image left and text right or left */
.basiccontentblock-mask.left .basic,
.basiccontentblock-mask.right .basic,
.basiccontentblock-layout.left .basic,
.basiccontentblock-layout.right .basic {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: repeat(2,50%);
	gap: 1rem 3rem;
	align-items: start;
	grid-row: 1 / 2;

    @media(max-width: 625px) {
	    grid-template-columns: 1fr;
    }

    .title h2 {
        font-size: 1.8rem;
	    margin:0 0 .25rem 0;
    }
    .subtitle h3 {
        font-size: 1.45rem;
	    margin:0 0 .25rem 0;
    }

    .image {

        img {
            border: 1px solid var(--img-border);
            border-radius: 30px;
            max-width: 100%;
        }
    }
}

.basiccontentblock-mask.right,
.basiccontentblock-layout.right {
    
    .basic {
        .title,
        .subtitle,
        .description,
        .button {
            @media(min-width: 626px) {
                justify-self: left;
                grid-column: 2/3;
            }
        }

        .image {
            max-width: 100%;
            width: 100%;
             @media(min-width: 626px) {
                justify-self: right;
                grid-column: 1/2;
                grid-row: 1/5;
            }
        }
    }
}


.basiccontentblock-mask.left,
.basiccontentblock-layout.left {
    
    .basic {
        .title,
        .subtitle,
        .description,
        .button {
            
            @media(min-width: 626px) {
               justify-self: left;
	            grid-column: 1/2;
            }
        }

        .image {
            max-width: 100%;
            width: 100%;
            
            @media(min-width: 626px) {
               justify-self: right;
                grid-column: 2/3;
                grid-row: 1/5;
            }
        }
    }
}

/* image icon */
.basiccontentblock-icon {
    .basic {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 1em 1em;   

        @media(min-width: 818px) {
           height: 100%;
        }

        .image {
            min-width: 40px;
            max-width: 40px;

            svg {max-width: 100%}
        }
        .image + .description {
            margin-top: 0;
        }
    }

    &.icon-brand {
        .image svg { color: var(--brand-color); }
    }

}
main .grid-container > .block.basiccontentblock-mask {
    padding: 2em 0 0 0;
}
.grid-container > .basiccontentblock.basiccontentblock-mask > .basic {
        z-index: 100;
        margin-bottom:  2em;
}
.grid-container > .basiccontentblock.basiccontentblock-mask > .title-hero-mask {
        grid-column: 1 / 13;
        grid-row: 1 / 2;
        z-index: 10;
        align-self: end;
        width: 100%;
        color: var(--brand-light-50p);
        font-size: 1px;
        justify-self: end;
        
        svg {
            color: var(--brand-light-50p);
            width: 100%;
            height: auto;
        }
}
.block.basiccontentblock-layout.border .basic {
    border: 2px solid var(--border);
    border-radius: 1rem;
    padding: 2rem;
}

/*** ASIDE ***/
main#main.aside .basiccontentblock-layout.bg-color {
	&.button-right {
		.basic {
			@media(min-width: 767px){
				> * {
					grid-column: 1 / 7;
				}
				
				> .button {
					grid-column: 7 / 13;
				}
			}
			@media(min-width: 520x) and (max-width: 766px){
				> * {
					grid-column: 1 / 5;
				}
				
				> .button {
					grid-column: 5 / 9;
				}
			}
		}
	}
	&.right {
		.basic {
			@media(min-width: 767px){
				> * {
					grid-column: 1 / 7;
				}
				
				> .image {
					grid-column: 7 / 13;
				}
			}
			@media(min-width: 520x) and (max-width: 766px){
				> * {
					grid-column: 1 / 5;
				}
				
				> .image {
					grid-column: 5 / 9;
				}
			}
		}
	}
	&.button-left {
		.basic {
			@media(min-width: 767px){
				> * {
					grid-column: 7 / 13;
				}
				> .button {
					grid-column: 1 / 7;
				}				
			}
			@media(min-width: 520x) and (max-width: 766px){			
				> * {
					grid-column: 5 / 9;
				}
				> .button {
					grid-column: 1 / 5;
				}				
			}
		}
	}
	&.left {
		.basic {
			@media(min-width: 767px){
				> * {
					grid-column: 7 / 13;
				}
				> .image {
					grid-column: 1 / 7;
				}				
			}
			@media(min-width: 520x) and (max-width: 766px){			
				> * {
					grid-column: 5 / 9;
				}
				> .image {
					grid-column: 1 / 5;
				}				
			}
		}
	}
	&.right,
    &.left,
    &.button-right,
    &.button-left {
        .basic {
			padding-left: 1rem;
			padding-right: 1rem;

			@media(min-width: 767px){
				display: grid;
				grid-template-rows: auto;
				grid-template-columns: subgrid;
				gap: 1rem 3rem;
				align-items: start;
				grid-row: 1 / 2;
				grid-column: 1 / 9;
				
				
			}
			@media (min-width: 520px) and (max-width: 766px) {
				display: grid;
				grid-template-rows: auto;
				grid-template-columns: subgrid;
				gap: 1rem 3rem;
				align-items: start;
				grid-row: 1 / 2;
			  grid-column: 1 / 13;
			}
			@media (max-width: 519px) {
				display: block;
			}
		}    
            
        }
    }
    .basic .button {
        align-self: start;
        justify-self: center;

    }
    &.button-right .basic  {
        @media (min-width: 1250px) {
            padding-right: 0;
        }
        .button {
            @media (max-width: 1250px) {
                align-self: start;
            }
        }
    }
    &.button-left .basic  {
        @media (max-width: 1250px) {
            padding-left: 0;
        }
        .button {
            @media (max-width: 1250px) {
                align-self: start;
            }
        }                 
    }
}