﻿section > div {
    display: grid;
    grid-template-columns: 4fr 1fr;
    margin: 3% 5%;
    gap: 50px;
}

    section > div > div:first-of-type > div:first-of-type {
        text-align: center;
    }

        section > div > div:first-of-type > div:first-of-type > img {
            width: 15%;
        }

    section > div > div:last-of-type > div:first-of-type {
        margin-top: 15%;
    }

    section > div > div:last-of-type > div {
        background-color: white !important;
        transition: 0.4s ease-in-out;
        text-align: center;
        padding: 10px;
    }

        section > div > div:last-of-type > div > a {
            display: block;
            height: 150px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }

        section > div > div:last-of-type > div:hover {
            transform: translateY(-15px);
            box-shadow: rgba(239, 124, 0, 0.12) 0px 2px 4px 0px, rgba(239, 124, 0, 0.32) 0px 2px 16px 0px;
        }

        section > div > div:last-of-type > div > p {
            margin-top: 5% !important;
            font-weight: bold;
            font-size: medium;
            color: dimgray;
        }


@media (max-width: 992px) {
    section > div > div:first-of-type > div:first-of-type > img {
        width: 35%;
    }
    section > div {
        grid-template-columns: 1fr;
        margin: 3% 4%;
        gap: 30px;
    }

        section > div > div:first-of-type > img {
            width: 25%;
        }
}

@media (max-width: 600px) {
    section > div > div:first-of-type {
        flex-direction: column;
        max-height: none;
    }

        section > div > div:first-of-type > img {
            width: 50%;
        }

    section > div {
        margin: 5% 3%;
        gap: 20px;
    }

        section > div > div:last-of-type > div:last-of-type > a {
            height: 120px;
        }

        section > div div:last-of-type > div:last-of-type > p {
            font-size: small;
        }
}
