.columns {
    text-align: center;

    .columns__list {
        width: 100%;
        justify-content: space-evenly;
        gap: 40px 0px;

        @media (min-width: 768px) {
            margin-left: -20px;
            margin-right: -20px;
        }

        .columns__item {
            height: 520px;
            text-decoration: none;
            position: relative;
            padding: 0px 20px;
            transition: all var(--transition);
            overflow: hidden;

            @media (max-width: 768px) {
                width: 100%;
            }

            @media (min-width: 769px) and (max-width: 1200px) {
                width: 50%;
            }

            .columns__item_wrapper {
                height: 100%;
                overflow: hidden;

                &:hover {
                    img {
                        transform: scale(1.05);
                    }

                    h5 {
                        color: var(--red);
                    }
                }

                img {
                    height: 100%;
                    object-fit: cover;
                    width: 100%;
                    transition: all var(--transition);
                }

                h5 {
                    color: var(--green-dark2);
                    font-family: var(--curvy-font);
                    position: absolute;
                    margin: 0;
                    margin-right: 20px;
                    transition: all var(--transition);
                    font-weight: var(--regular);
                    bottom: 0;
                    right: 0;
                    background-color: var(--white);
                    padding: 20px 0px 0px 25px;
                    border-radius: 12px 0px 0px 0px;

                    @media (max-width: 768px) {
                        font-size: 18px;
                        line-height: 26px;
                        padding: 20px 0px 0px 20px;
                        max-width: 230px;
                    }
                }
            }

            @media (min-width: 1200px) {

                &:nth-child(even) {
                    h5 {
                        top: 0;
                        right: 0;
                        background-color: var(--white);
                        padding: 0px 0px 20px 25px;
                        border-radius: 0px 0px 0px 12px;
                        height: fit-content;
                    }
                }
            }
        }
    }
}