.aek-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    
    h2 {
        font-family: DIN-Medium;
        font-size: 24px;
        margin-bottom: 4px;
    }
}

.aek-variants {
    min-width: 600px;
}

.aek-variant-block {
    &:hover:not(:first-of-type) > .bar {
        background-color: #F8F8F8;
    }
    
    &.expandable.active {
        .bar {
            background-color: #F8F8F8;
    
            div {
                svg {
                    rotate: 0deg
                }
            }
        }

        .expandable-area {
            max-height: 100%;
        }
    }

    .bar {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 0.75fr 1fr 0.5fr;
        height: 64px;
        padding: 0 24px;
        transition: 150ms;
        cursor: pointer;
        user-select: none;
        
        div {
            display: flex;
            justify-content: start;
            align-items: center;
            height: 64px;

            img {
                width: 50px;
                height: 50px;
            }
            
            h3, p {
                font-size: 15px;
                font-family: 'DIN-Medium';
                margin: 0;
                padding: 0;
            }
            
            h3 {
                padding-left: 12px;
            }
            
            &:last-of-type {
                justify-content: end;
                align-items: center;
            }
            
            svg {
                rotate: 180deg;
                transition: 150ms;
            }
            
        }
    }

    &.expandable {
        .expandable-area {
            background-color: #F8F8F8;
            max-height: 0;
            overflow: hidden;
            padding: 0 24px;

            .content {
                padding-top: 12px;
                padding-bottom: 12px;
                
                h4 {
                    font-size: 15px;
                    font-family: 'DIN-Medium';
                }
                
                .data-grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 24px;
                    margin-bottom: 24px;

                    @media (max-width: 768px) {
                        grid-template-columns: repeat(1, 1fr);   
                    }
                    
                    .grid-column {
                        border-left: 2px solid #cccccc;
                        padding-left: 12px;
                        padding-bottom: 4px;
                        
                        h5 {
                            font-size: 15px;
                            font-family: 'DIN-Medium';
                            letter-spacing: normal;
                        }
                        
                        p {
                            font-size: 15px;
                            font-family: 'DIN-Regular';
                        }

                        img {
                            width: 16vw;
                            aspect-ratio: 1 / 1;
                            object-fit: cover;

                            @media (max-width: 768px) {
                                width: 24vw;
                                
                            }
                        }

                        .grid {
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                            
                            .grid-column {
                                padding-left: 0 !important;
                                border: none !important;
                            }
                        }
                    }
                }
            }
        }
    }
}

.product-tabs>li>a {
    font-size: 18px;
}