.hero {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 50px 0;
    height: 100dvh;

    @media (max-width: 1200px) {
        padding: 0 50px 0 50px;
        justify-content: center;
    }
}

.left {
    flex: 1;
    padding: 0 50px;
    gap: 20px;

    @media (max-width: 1200px) {
        padding: 50px 0 0 0;
    }

    .tag-container {  
        align-items: center;
        gap: 10px;
        width: fit-content;
        padding: 5px 11px 5px 6px;

        background-color: var(--color-secondary);
        border-radius: 20px;

        img {
            width: 1.2rem;
            height: 1.2rem;
        }
    }

    .company-info {
        gap: 15px;

        h1 {
            font-size: 3rem;
            font-weight: 800;
        }
    }
}

.right {
    flex: 2;
    gap: 15px;
    
    .grid-container {
        justify-content: flex-end;
        flex-wrap: wrap;
        
        overflow: hidden;
        max-height: 100dvh;

        @media (max-width: 610px) {
            justify-content: center;
        }
        
        .grid-content {
            gap: 15px;
            margin: 0 10px 0 10px;
            animation: scrollUp 20s linear infinite;
            
            .grid-item {
                border-radius: 10px;
                overflow: hidden;

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

        .grid-content:nth-child(2) {
            justify-content: flex-end;
            animation: scrollDown 20s linear infinite;
        }
    }
}

@keyframes scrollUp {
    0% {
        transform: translateY(15px);
    }
    100% {
        transform: translateY(-842px);
    }
}

@keyframes scrollDown {
    0% {
        transform: translateY(-842px);
    }
    100% {
        transform: translateY(15px);
    }
}