.g_ratio_base {background:#ccc;
width:100%;
position: relative;
display: flex;
}
.g_ratio_base_2 {
    display: flex;
	width: 61.8%;
	    flex-wrap: wrap;
}
.g_ratio_base3 {
    display: flex;
	width: 100%;
}
.g_ratio_base_4{
	width:calc(100% - 61.8%);
    display: flex;
	flex-wrap: wrap;
}
.g_ratio_base_5 {
    display: flex;
	width: 100%;
}



.g_ratio_base_a {background:yellow;
width:100%;
padding-top:61.8%;
position: relative;
}
.g_ratio_base_b {background:blue;
width: 100%;
    padding-top: 100%;
position: relative;
}

.g_ratio_base_c {background:orange;
position: relative;
width: 100%;
padding-top: 61.8%;
}

.g_ratio_base_d {background:green;
position: relative;
width: 61.8%;
}


.g_ratio_base_e {background:pink;
    width: 100%;
	position: relative;
	    padding-top: 100%;
}

.g_ratio_base_f {background:red;
width:61.8%;
position: relative;
padding-top: 61.8%;
}


/*** content ***/
.g_ratio_base_a_content,.g_ratio_base_f_content,
.g_ratio_base_b_content,.g_ratio_base_c_content,
.g_ratio_base_d_content,.g_ratio_base_e_content {
    position: absolute;
    top: 0;
}