Размещение изображения, текста и ссылки внутри элемента сетки CSS с помощью flex ⇐ CSS

[Anonymous]

Я создаю макет html/css, который должен выглядеть следующим образом:
(https://i.sstatic.net/Z49ekM8m.png)Каждое поле представляет собой ссылку. Чтобы расширить область активной ссылки на весь блок и обеспечить позиционирование текста внизу каждого элемента сетки, я установил каждую ссылку как флексбокс. Итак, в настоящее время у меня есть макет сетки с гибким блоком внутри каждого элемента сетки, если это имеет смысл.
На данный момент мне удалось это сделать:
(https://i.sstatic.net/itbwRXvj.png)
Однако, когда я пытаюсь поместить изображение в поле «Обучение под руководством инструктора», я запускаю во всевозможные проблемы. Как я могу добавить свое изображение, не нарушая остальную часть моего дизайна?
Я попробовал поместить изображение в элемент div гибкого поля, и все это просто взорвалось.< /p>
Это «рабочий» код до того, как я попытался добавить свое изображение:

< div class="snippet-code">

Код: Выделить всё

.vtx_gc_001 {
display: grid;
height: 450px;
/*padding: 10px;*/
gap: 30px;
background-color: #f1f1f1;
}

.vtx_gi {
border-radius: 50px;
display: flex;
width: 100%;
height: 100%;
}

#vtxgi1 {
grid-column: 1 / span 2;
background-color: #00943c;
}

#vtxgi2 {
grid-row: 2 / 4;
background-color: #008299;
border-radius: 0px;
border-bottom-right-radius: 50px;
}

#vtxgi3 {
grid-column: 2;
grid-row: 2;
background-color: #BEC1C3;
}

#vtxgi4 {
grid-column: 2;
grid-row: 3;
background-color: #00609C;
}

#vtxgi5 {
grid-column: 1 /span 2;
grid-row: 4;
background-color: #F3CF40;
}

#vtx_a1,
#vtx_a2,
#vtx_a3,
#vtx_a4,
#vtx_a5 {
display: flex;
align-self: last baseline;
}

.vtx_grid_a {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}

Код: Выделить всё

[url=https://vertexinc.cventevents.com/event/474a32aa-8375-4d1d-9462-8634c8d2d583/websitePage:012cdbf9-f1e0-4f63-a3c4-87721ee58474?RefId=us-home-cm-university-attendee&rt=8eGNBUYg8Ey12a5hJATG8A]Exchange 2024[/url]
[url=https://university.vertexinc.com/pages/76/instructor-led-training-schedule]Instructor Led Training[/url]
[url=https://university.vertexinc.com/learn/catalog]Course Catalog[/url]
[url=https://university.vertexinc.com/pages/90/partners]Partner Resources[/url]
[url=https://university.vertexinc.com/pages/104/get-certified]Get Certified![/url]

Подробнее здесь: https://stackoverflow.com/questions/790 ... using-flex