.post-usage-preview {
    section {
        display: flex;
        padding: 30px;
        background-color: #E9E8E8;
        border-radius: 10px;
        margin: 0 auto;
        max-width: 90%;        

        @media (max-width: 768px) {
            flex-direction: column; 
            padding: 20px;
        }

        .figure-container {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 300px;

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

        figure {
            width: 100%;
            height: 100%;
            margin: 0!important;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #E9E8E8;
            overflow: hidden; 

            @media (max-width: 768px) {
                width: 100%;
                height: auto;
            }
            
            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                border-radius: 10px;

                @media (max-width: 768px) {
                    width: 100%;
                    height: auto;
                }
            }
        }
        
        .icon-box-content {
            flex: 1;
            padding-right: 10px;
            padding-left: 20px;

            @media (max-width: 768px) {

                padding-right: 0;
                padding-left: 0;
                margin-top: 20px;
            }
        }

        .icon-box-title {
            font-size: 1.5em;
        }

        .box-content {
            align-items: center;
            text-align: justify;
            color: black;
        }
        
        .box-content a {
            color: black;
        }
    }

}