/* our arguments style */
section.our-arguments { padding: 20px 0 50px 0; }
section.our-arguments .title-content-wrapper .main-title h2 { font-size: clamp(3.125rem, 0.9211rem + 8.7719vw, 7.5rem); }
section.our-arguments .our-arguments-image img { width: calc(100% - 150px); padding: 0 0 20px 0; }
section.our-arguments .sub-title { font-size: clamp(1.75rem, 1.75rem + 0vw, 1.75rem); line-height: normal; font-weight: 700; transition: 400ms; padding: 0 0 20px 0; max-width: 1200px; }
section.our-arguments .content { max-width: 1200px; }

/* our arguments style 

<?php if ($blocks_preview) : ?>
					<!-- Our Arguments Blocks Preview (3 per line) -->
					<div class="our-arguments-blocks-preview">
						<?php foreach ($blocks_preview as $block) : 
							$block_image = $block['block_image'];
							$block_link = $block['block_link'];
							?>
							<div class="block-item">
								<?php if ($block_image) : ?>
									<div class="block-image">
										<img src="<?php echo esc_attr($block_image['url']); ?>" alt="<?php echo esc_attr($block_image['alt']); ?>" />
									</div>
								<?php endif; ?>
								<?php if ($block_link) : ?>
									<div class="block-link">
										<a href="<?php echo esc_url($block_link['url']); ?>" 
											<?php if ($block_link['target']) : ?> target="<?php echo esc_attr($block_link['target']); ?>" <?php endif; ?>
											class="button--7 button--smalltext">
											<?php echo esc_html($block_link['title']); ?>
										</a>
									</div>
								<?php endif; ?>
							</div>
						<?php endforeach; ?>
					</div>
				<?php endif; ?>

on large screens three per line with flex */
@media (min-width: 992px) {
    section.our-arguments .our-arguments-blocks-preview {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }
    section.our-arguments .our-arguments-blocks-preview .block-item {
        flex: 1 1 calc(33.333% - 20px);
        box-sizing: border-box;
        /* text-align: center; */
    }
}
section.our-arguments .our-arguments-blocks-preview {
    margin-top: 40px;
}
section.our-arguments .our-arguments-blocks-preview .block-item {
    position: relative;
}

section.our-arguments .our-arguments-blocks-preview .block-item .block-card {
    display: block;
    position: relative;
    text-decoration: none;
}

/* image */
section.our-arguments .our-arguments-blocks-preview .block-item .block-image {
    position: relative;
}

section.our-arguments .our-arguments-blocks-preview .block-item .block-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

/* overlay texte */
section.our-arguments .our-arguments-blocks-preview .block-item .block-link {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    margin-top: 0;
    text-align: left;
    z-index: 2;

    /* optionnel : lisibilité */
    /* color: #fff; */
} 

/* optionnel : léger voile pour lisibilité (cliquable car sur le <a>) */
section.our-arguments .our-arguments-blocks-preview .block-item .block-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1; */
    /* optionnel : dégradé bas */
    /* background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); */
}

/* le texte au-dessus du voile */
section.our-arguments .our-arguments-blocks-preview .block-item .block-link {
    z-index: 2;
}

section.our-arguments .our-arguments-blocks-preview .block-item .block-link {
    font-size: clamp(1.75rem, 1.75rem + 0vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    background-color: #fff;
    /* padding: 10px 15px; */
}


section.our-arguments .our-arguments-blocks-preview .block-item .block-link a {
    font-size: clamp(1.75rem, 1.75rem + 0vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
}

section.our-arguments .our-arguments-blocks-preview .block-item .block-description {
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
    color: var(--blackcolor);
}

section.our-arguments .block-description-button a { font-size: 18px; display: inline-block; color: var(--blackcolor); padding: 5px 10px 5px 10px; line-height: 1; text-align: left; border: 1px solid; font-weight: 800; ; }
section.our-arguments .block-description-button a:hover { background-color: var(--btn-hover-bg-color) !important; border-color: var(--btn-hover-text-color) !important; color: var(--btn-hover-text-color)!important; }
section.our-arguments .block-description-button.aligncenter { text-align: center; }
section.our-arguments .block-description-button.alignright { text-align: right; }