.about {
    display: grid;
    grid-template-columns: 50% 10% 40%;
    height: 450px;
    align-items: center;

    .info {
        text-align: left;

        h2 {
            color: #FD8B51;
        }
    }

    .feature {
        display: flex;
        justify-content: end;
        align-items: end;
        margin: 0 0 0 auto;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border: 5px solid #FD8B51;
        border-radius: 20px;

        img {
            border-radius: 10px;
            width: 100%;
            object-fit: cover;
        }
    }
}

/* Tablet View */
@media (max-width: 992px) {
    .about {
        grid-template-columns: 45% 10% 45%;
        height: 400px;
        gap: 0;

        .info {
            h2 {
                font-size: 1.8rem;
            }

            p {
                font-size: 0.9rem;
            }
        }

        .feature {
            img {
                height: 300px;
            }
        }
    }
}

/* Mobile View */
@media (max-width: 768px) {
    .about {
        grid-template-columns: 1fr;
        height: auto;
        gap: 30px;
        padding: 40px 0;

        .info {
            text-align: center;
            order: 2;

            h2 {
                font-size: 1.5rem;
                margin-bottom: 15px;
            }

            p {
                font-size: 0.9rem;
                line-height: 1.5;
                margin-bottom: 20px;
            }
        }

        .feature {
            order: 1;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            max-width: 350px;
            width: 100%;

            img {
                height: 250px;
                width: 100%;
            }
        }
    }
}

/* Small Mobile View */
@media (max-width: 480px) {
    .about {
        padding: 30px 0;
        gap: 20px;

        .info {
            h2 {
                font-size: 1.3rem;
            }

            p {
                font-size: 0.85rem;
            }
        }

        .feature {
            max-width: 280px;
            border: 3px solid #FD8B51;

            img {
                height: 200px;
            }
        }
    }
}