.vclk__decor--line::after {
    background-image: url("../images/line.svg");
}

.vclk__decor--angle::after {
    background-image: url("../images/angle.svg");
}
.vclk__item--7.vclk__title-link::after {
    background-image: url("../images/angle-reverse.svg");
}

.vclk {
    --vclk-gap: 24px;
    --vclk-radius: 15px;
    --vclk-text-color: #434549;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    gap: var(--vclk-gap);
    width: 100%;
    align-items: start;
    position: relative;
}

.vclk span{
    font-family: Kalam, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 24px;
}
.vclk__image-link {
    z-index: 10;
}

.vclk__image-link,
.vclk__title-link {
    display: block;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.vclk__image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--vclk-radius);
}

.vclk__title-link {
    position: relative;
    color: var(--vclk-text-color);
    font-size: 18px;
    line-height: 1.2;
    text-align: left;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.vclk__title {
    display: block;
    position: relative;
    z-index: 2;
}

.vclk__item--8.vclk__title-link::after, .vclk__item--5.vclk__title-link::after, .vclk__item--3.vclk__title-link::after {
    margin-left: -75px;
}

.vclk__item--2.vclk__title-link::after {
    height: 200px;
    width: 52%;
    margin-left: 48%;
    margin-bottom: -80px;
    background-size: 100%;
}

.vclk__item--2.vclk__title-link span {
    text-align: right;
    width: 100%;
    padding-left: calc(80% + 24px);
    margin-bottom: -50px;
}
.vclk__item--7.vclk__title-link {
/*     flex-direction: column-reverse; */
    width: 100%;
}
.vclk__item--7.vclk__title-link::after {
    height: 200px;
    width: 52%;
    margin-right: 48%;
    margin-top: -160px;
    background-size: 100%;
    background-position: bottom;
}

.vclk__item--7.vclk__title-link span {
    width: 100%;
    padding-right: calc(80% + 24px);
    margin-bottom 0px;
}

/* decorative lines */
.vclk__title-link::after {
    content: "";
    position: relative;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    pointer-events: none;
    z-index: 1;
    width: calc(100% + 75px);
    height: 50px;
    margin-right: -75px;
}

/* .vclk__decor--line::after {
    background-image: url("../images/line.svg");
}

.vclk__decor--angle::after {
    background-image: url("../images/angle.svg");
} */

.vclk__empty-tile {
    grid-column: 3;
    grid-row: 3;
    width: 100%;
    aspect-ratio: 1 / 1;
}

/* images */
/* row 2 */
.vclk__image-link.vclk__item--1 {
    grid-column: 2;
    grid-row: 2;
}

.vclk__image-link.vclk__item--2 {
    grid-column: 3;
    grid-row: 2;
}

.vclk__image-link.vclk__item--3 {
    grid-column: 4;
    grid-row: 2;
}

/* row 3 */
.vclk__image-link.vclk__item--4 {
    grid-column: 2;
    grid-row: 3;
}

.vclk__image-link.vclk__item--5 {
    grid-column: 4;
    grid-row: 3;
}

/* row 4 */
.vclk__image-link.vclk__item--6 {
    grid-column: 2;
    grid-row: 4;
}

.vclk__image-link.vclk__item--7 {
    grid-column: 3;
    grid-row: 4;
}

.vclk__image-link.vclk__item--8 {
    grid-column: 4;
    grid-row: 4;
}

/* titles */
/* row 1 */
.vclk__title-link.vclk__item--2 {
    grid-column: 1 / 6;
    grid-row: 1;
    width: 100%;
    align-self: end;
	margin-bottom: -30px;
}

/* row 2 */
.vclk__title-link.vclk__item--1 {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    padding-right: 50px;
}

.vclk__title-link.vclk__item--3 {
    grid-column: 5;
    grid-row: 2;
    align-self: center;
    padding-left: 50px;
    text-align: right;
}

/* row 3 */
.vclk__title-link.vclk__item--4 {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    padding-right: 20px;
}

.vclk__title-link.vclk__item--5 {
    grid-column: 5;
    grid-row: 3;
    align-self: center;
    padding-left: 50px;
    text-align: right;
}

/* row 4 */
.vclk__title-link.vclk__item--6 {
    grid-column: 1;
    grid-row: 4;
    align-self: center;
    padding-right: 50px;
    
}

.vclk__title-link.vclk__item--8 {
    grid-column: 5;
    grid-row: 4;
    align-self: center;
    padding-left: 50px;
    text-align: right;
}

/* row 5 */
.vclk__title-link.vclk__item--7 {
    grid-column: 1;
    grid-row: 5;
    grid-column: 1 / 6;
    align-self: start;
    margin-top: -30px;
}

/* decorations */

/* title 2 - top angle toward image 2 */
.vclk__title-link.vclk__item--2::before {
    width: 150px;
    height: 90px;
    right: -118px;
    top: 28px;
    transform: none;
}


/* title 7 - bottom angle reversed from image 7 */
.vclk__title-link.vclk__item--7::before {
    width: 150px;
    height: 90px;
    right: -116px;
    top: -72px;
    transform: scale(-1, -1);
}

/* tablet */
@media (max-width: 1024px) {
    .vclk {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 24px 20px;
    }

    .vclk__empty-tile {
        display: none;
    }

    .vclk__image-link,
    .vclk__title-link {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .vclk__title-link {
        padding: 0 !important;
        align-self: auto !important;
    }

    .vclk__title-link::before {
        display: none;
    }

    .vclk__image-link {
        margin-bottom: -12px;
    }
}

/* mobile */
@media (max-width: 640px) {
    .vclk {
        grid-template-columns: 1fr;
    }
}