/*Special content block for main section START*/
.contentBlock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    padding: 20px;
    border-radius: 15px;
    background-color: var(--body-text-bg-bg);
    container-type: inline-size;
    container-name: card;
}

.contentBlock h1,
.contentBlock h2,
.contentBlock h3,
.contentBlock h4,
.contentBlock h5,
.contentBlock h6 {
    font-size: 20px;
    font-weight: 700;
    color: var(--body-text-bg-title);
    text-transform: capitalize;
}

.contentBlock p,
.contentInner {
    font-size: 12px;
    font-weight: 400;
    color: var(--body-text-bg-text);
}

.contentWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.contentWrapper img {
   /* max-width: 314px;*/
    /* position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto 0; */
}

.contentInner {
   /* display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 65%;*/
    /* max-width: 537px; */
    z-index: 2;
}

.contentInner ul,
.contentInner ol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 5px;
}

.contentInner ul {
    list-style: inside;
}

.contentInner ol {
    list-style: decimal inside;
}

.contentWrapper .button.green {
    background: var(--body-text-bg-green-btn-bg);
    color: var(--body-text-bg-green-btn-text);
}

.contentWrapper .button.hollow {
    color: var(--body-text-bg-hollow-btn-text);
    background-color: transparent;
    box-shadow: 0 0 0 1px var(--body-text-bg-hollow-btn-bg), 0 0 0 0px #FFF;
}

.contentWrapper .button.green:hover {
	background-color: var(--body-text-bg-green-btn-bg-hover);
    color: var(--body-text-bg-green-btn-text-hover);
}

.contentWrapper .button.hollow:hover {
	color: var(--body-text-bg-hollow-btn-bg-hover);
    box-shadow: 0 0 0 1px var(--body-text-bg-hollow-btn-text-hover), 0 0 0 0px #FFF;
}

/*Special content block for main section END */

/*Blocks wrapper START*/
.blocksWrapper {
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
    /* margin-bottom: 10px; */
}
/*Blocks wrapper END*/

/*@container card (max-width: 600px) {
    .contentWrapper img {
        max-width: 158px;
    }
}*/
/*@container card (max-width: 400px) {
    .contentWrapper img {
        max-width: 128px;
    }
}*/

@media (max-width: 768px) {
    .blocksWrapper {
        flex-direction: column;
    }
}


@container mainContent (min-width: 910px) {
/*     .contentBlock h1,
    .contentBlock h2,
    .contentBlock h3,
    .contentBlock h4,
    .contentBlock h5,
    .contentBlock h6 {
        font-size: 23px;
    } */

    .contentBlock p,
    .contentInner {
        font-size: 14px;
    }
}

@container mainContent (min-width: 1366px) {
/*     .contentBlock h1,
    .contentBlock h2,
    .contentBlock h3,
    .contentBlock h4,
    .contentBlock h5,
    .contentBlock h6 {
        font-size: 31px;
    } */
    .contentBlock p,
    .contentInner {
        font-size: 19px;
    }
}