:root {
    --fdProj-padding: calc(0.5 * var(--page-h-padding));
    --fdProj-break-padding: var(--fdProj-padding);
}

#franDev_proj .img-container {
    /*height: 35vw;*/
    aspect-ratio: 10 / 16;
}

.img-descript p { margin-bottom: 0; }

#franDev_proj h1 {
	font-size: calc(.7 * var(--fran-h1-size));
}

#franDev_proj h3 { margin-bottom: 0px; margin-top: 0px; }

#franDev_proj .column .img-descript:before {
	content: "";
	padding-top: calc(var(--fdProj-break-padding) - 5px);
	margin-top: var(--fdProj-break-padding);
	width: 30%;
	display: block;
	border-top: 1px solid #ddd;
}

#franDev_proj .column:hover .img-descript:before {
	border-top: 1px solid var(--red-active-color);
}

.extra-margin {
    margin-left: calc(-1 * var(--fdProj-padding));
    margin-right: calc(-1 * var(--fdProj-padding));
}

.extra-margin .column {
    padding-left: var(--fdProj-padding);
    padding-right: var(--fdProj-padding);
}

@media (max-width: 900px) and (min-width: 551px) {
	#franDev_proj .img-descript * { text-align: center; }

	#franDev_proj .img-descript h3 { margin-bottom: 0px; margin-top: 10px; }

	#franDev_proj .img-descript p { margin-bottom: 20px; }
}

@media (max-width: 550px) {
	#franDev_proj .swiper-slide .img-container {
		height: 120vw;
	}

	#franDev_proj .img-descript * { text-align: center; }

	#franDev_proj .img-descript h3 { margin-bottom: 0px; margin-top: 10px; font-size: calc( 1.5 * var(--fran-h3-size)); }

	#franDev_proj .img-descript p { margin-bottom: 20px; font-size: var(--fran-h3-size); }

	#franDev_proj .swiper-container {
		position: relative;
	}

	#franDev_proj .swiper-pagination {
		top: calc(120vw - 30px);
		bottom: auto;
	}

	#franDev_proj .swiper-pagination-bullet {
	    background-color: #fff;
	    width: var(--franDev_blt_width);
	    border-radius: 0px;
	    height: 2px;
	    margin: 0 4px !important;
	}
}