Добрый день уважаемые. Помогите, пожалуйста, кто работал с данной библиотекой. Как адаптивно (> 960px) расположить 2 нижних блока что б они были прижаты, и находись на одном уровне с нижним краем большего фото, а первые два к верхнему краю ?
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/css/uikit-rtl.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.40/css/uikit.min.css" rel="stylesheet" />
<style>
.main {
position: relative;
width: 100%;
}
.bl_mainGame {
width: 100%;
background-color: #394264;
}
.bl_mainGame__link {
position: relative;
display: block;
outline: none;
width: 100%;
}
.bl_mainGame__img {
display: block;
margin: 0 auto;
}
.bl_mark {
position: absolute;
right: 0;
top: 0;
width: 150px;
min-height: 118px;
border-radius: 20px;
padding: 5px;
box-shadow: 0 2px 0 rgba(211, 58, 33, 0.75);
background-color: #fe5034;
text-align: center;
text-shadow: 0 2px 0 rgba(244, 122, 102, 0.46);
color: #fff;
font-family: "Roboto - Bold Condensed", sans-serif;
font-size: 22px;
line-height: 26px;
}
.bl_mark:after {
content: "";
position: absolute;
top: 0;
right: 0;
border: 15px solid transparent;
border-top: 15px solid #1f253d;
border-right: 15px solid #1f253d;
border-bottom: 15px solid #fcb150;
border-left: 15px solid #fcb150;
border-bottom-left-radius: 10px;
z-index: 3;
}
.bl_mark strong {
display: block;
border-radius: 20px;
box-sizing: border-box;
border: 2px dashed #fc9550;
padding: 18px 8px;
}
.bl_mainGame__title {
margin: 0;
padding-left: 20px;
line-height: 60px;
color: #fff;
font-family: "Roboto - Bold Condensed", sans-serif;
font-size: 18px;
text-transform: uppercase;
}
.bl_topSlot__wrapper {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 100%;
height: 100%;
min-height: 505px;
}
.bl_topSlot {
width: 100%;
}
.bl_topSlot__linkGame {
position: relative;
width: 100%;
max-height: 250px;
display: block;
overflow: hidden;
}
.bl_topSlot__description {
width: 100%;
min-height: 60px;
background-color: #394264;
text-align: center;
padding-bottom: 6px;
}
.bl_topSlot__name {
color: #fff;
margin: 0;
padding-top: 15px;
font-size: 18px;
font-weight: 700;
}
.bl_topSlot__company {
margin-top: 8px;
font-size: 14px;
color: #9fabd9;
}
</style>
</head>
<body>
<div class="uk-margin-xlarge-left uk-margin-xlarge-right" uk-grid>
<div class="uk-width-1-1@s uk-width-4-5@xl">
<main class="main">
<div uk-grid>
<div class="uk-width-1-1@s uk-width-1-2@m">
<div class="bl_mainGame">
<a class="bl_mainGame__link" href="#">
<div class="bl_mark">
<strong>Бонусы без депозита ждут тебя!</strong>
</div>
<img class="bl_mainGame__img" src="http://via.placeholder.com/530x530" alt="">
</a>
<h3 class="bl_mainGame__title">BOOK OF RA 6 DELUXE</h3>
</div>
</div>
<div class="uk-width-1-1@s uk-width-1-2@m ">
<div uk-grid>
<div class="uk-width-1-2">
<div class="bl_topSlot__wrapper">
<div class="bl_topSlot">
<a class="bl_topSlot__linkGame" href="#" title="">
<img class="bl_topSlot__img" src="http://via.placeholder.com/300x244" alt="">
</a>
<div class="bl_topSlot__description">
<h3 class="bl_topSlot__name">Lucky Lady's Charm</h3>
<a class="bl_topSlot__company" href="#">Novomatic</a>
</div>
</div>
<div class="bl_topSlot">
<a class="bl_topSlot__linkGame" href="#" title="">
<img class="bl_topSlot__img" src="http://via.placeholder.com/300x244" alt="">
</a>
<div class="bl_topSlot__description">
<h3 class="bl_topSlot__name">Crazy Monkey</h3>
<a class="bl_topSlot__company" href="#">Igrosoft</a>
</div>
</div>
</div>
</div>
<div class="uk-width-1-2">
<div class="bl_topSlot__wrapper">
<div class="bl_topSlot">
<a class="bl_topSlot__linkGame" href="#" title="">
<img class="bl_topSlot__img" src="http://via.placeholder.com/300x244" alt="">
</a>
<div class="bl_topSlot__description">
<h3 class="bl_topSlot__name">Dracula’s Family</h3>
<a class="bl_topSlot__company" href="#">Playson</a>
</div>
</div>
<div class="bl_topSlot">
<a class="bl_topSlot__linkGame" href="#" title="">
<img class="bl_topSlot__img" src="http://via.placeholder.com/300x244" alt="">
</a>
<div class="bl_topSlot__description">
<h3 class="bl_topSlot__name">Book of Ra</h3>
<a class="bl_topSlot__company" href="#">Novomatic</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
_codepen.io/anon/pen/bLzjKy (html желательно не менять)
