body {
    position: relative;
}

header {
    position: sticky !important;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(18px) !important;
    background: rgba(239, 245, 249, 0.7);
    border-bottom: 1px solid rgba(23, 112, 159, 0.08);
}

.problem-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    
    @media (max-width: 980px) {
        grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: 640px) {
        grid-template-column: repeat(1ft);    
    }
}

.carier {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    
    @media (max-width: 980px) {
        grid-template-columns: repeat(2, 1fr);
    }
    
    @media (max-width: 640px) {
        grid-template-column: repeat(1ft);    
    }
}