@media (max-width: 990px) {
    .career-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .div1 {
        grid-row: span 2 / span 2;
        grid-column-start: 1;
        height: 100% !important;
    }
    
    .div7 {
        grid-column: 2;
        grid-column-start: 2;
        grid-row-start: 1;
    }
    
    .div8 {
        grid-column: span 3 / span 3;
        grid-column-start: 3;
        grid-row-start: 1;
    }

    .div9 {
        grid-column: span 3 / span 3;
        grid-column-start: 2;
        grid-row-start: 2;
    }
    
    .div10 {
        grid-column-start: 5;
        grid-row-start: 2;
    }
    
    .div11 {
        grid-row: span 2 / span 2;
        grid-column-start: 6;
        height: 100% !important;
    }
    
    .div2, .div3, .div4, .div5, .div6 {
        display: none;
    }
}

/* For screens smaller than 520px */
@media (max-width: 520px) {
    .career-grid {
        grid-template-columns: repeat(4, 1fr); /* Set grid to 4 columns */
    }

    .div1 {
        display: none; /* Hide div1 for this layout */
    }

    .div7 {
        grid-column-start: 1; /* Column 1 */
        grid-row-start: 1; /* Row 1 */
    }

    .div8 {
        grid-column: span 2 / span 2; /* Spans 2 columns */
        grid-column-start: 2; /* Starts at column 2 */
        grid-row-start: 1; /* Row 1 */
    }

    .div9 {
        grid-column: span 2 / span 2; /* Spans 2 columns */
        grid-column-start: 1; /* Starts at column 1 */
        grid-row-start: 2; /* Row 2 */
    }

    .div10 {
        grid-column-start: 3; /* Column 3 */
        grid-row-start: 2; /* Row 2 */
    }

    .div11 {
        grid-column: span 1 / span 1; /* Spans 1 column */
        grid-column-start: 4; /* Column 4 */
        grid-row: span 2 / span 2; /* Spans 2 rows */
    }

    .div2, .div3, .div4, .div5, .div6 {
        display: none;
    }
}




/** HONEYCOMB ***/
@media not screen and (min-width: 1400px) {
    .honeycomb-grid{
      transform: scale(0.8);
      transform-origin: center top;
      transition: transform 0.3s ease-in-out;
      margin: 0 auto;
      width: 100%;
      position: relative;
      top: 50%;
      left: 46%;
      translate: -50%;
    }
}

@media not screen and (min-width: 1200px) {
    .honeycomb-grid {
        left: 39%;
    }
}
@media not screen and (min-width: 1130px) {
    .honeycomb-grid {
        left: 39%;
    }

    
        
    .honeycomb-grid> :nth-child(9),
    .honeycomb-grid> :nth-child(27){
        transform: rotate(45deg) translate(-65px, 55px) !important;
    }
}
@media not screen and (min-width: 1080px) {
    .honeycomb-grid {
        grid-template-columns: repeat(7, 105px);
    grid-template-rows: repeat(2, 105px);
    }
    .honeycomb-grid> :nth-child(1),
    .honeycomb-grid> :nth-child(2),
    .honeycomb-grid> :nth-child(3),
    .honeycomb-grid> :nth-child(4),
    .honeycomb-grid> :nth-child(5),
    .honeycomb-grid> :nth-child(6),
    .honeycomb-grid> :nth-child(7),
    .honeycomb-grid> :nth-child(8),
    .honeycomb-grid> :nth-child(9),
    .honeycomb-grid> :nth-child(25),
    .honeycomb-grid> :nth-child(26),
    .honeycomb-grid> :nth-child(27),
    .honeycomb-grid> :nth-child(10){
        display: none;
    }

    .honeycomb-grid> :nth-child(25),
    .honeycomb-grid> :nth-child(18),
    .honeycomb-grid> :nth-child(11) {
        visibility: hidden;
    }

    .honeycomb-grid> :nth-child(19) {
        visibility: unset;
    }
    
}


@media not screen and (min-width: 990px) {
    .honeycomb-grid {
        left: 23.5%;
        translate: -50% 20%;
    }
}

@media not screen and (min-width: 768px) {
    .honeycomb-grid {
        left: 27.5%;
    }

    .honeycomb-grid> :nth-child(17),
    .honeycomb-grid> :nth-child(16),
    .honeycomb-grid> :nth-child(24){
        display: none;
    }
    .honeycomb-grid> :nth-child(19){
        transform: rotate(45deg) translate(-76px, 190px) !important;
    }

    .honeycomb-grid> :nth-child(11),
    .honeycomb-grid> :nth-child(24){
        visibility: unset;
    }

    .honeycomb-grid> :nth-child(18) {
        transform: rotate(45deg) translate(-90px, -20px) !important;
    }
    
}

@media not screen and (min-width: 730px) {
    .honeycomb-grid {
        left: 42%;
    }

    .honeycomb-grid> :nth-child(15),
    .honeycomb-grid> :nth-child(18),
    .honeycomb-grid> :nth-child(19){
        visibility: hidden;
        transform: rotate(45deg) translate(-237px, 250px) !important;
    }

  
}

@media not screen and (min-width: 570px) {
    .honeycomb-grid {
        left: 55%;
    }
    .honeycomb-grid> :nth-child(18),
    .honeycomb-grid> :nth-child(19),
    .honeycomb-grid> :nth-child(14),
    .honeycomb-grid> :nth-child(23){
        visibility: hidden;
        transform: rotate(45deg) translate(-321px, 309px) !important;
    }
}

@media not screen and (min-width: 530px) {
    .honeycomb-grid {
        left: 50%;
    }
}

@media not screen and (min-width: 500px) {
    .honeycomb-grid {
        left: 55%;
    }
    .honeycomb-grid> :nth-child(18),
    .honeycomb-grid> :nth-child(19),
    .honeycomb-grid> :nth-child(14),
    .honeycomb-grid> :nth-child(13),
    .honeycomb-grid> :nth-child(22),
    .honeycomb-grid> :nth-child(23){
        visibility: hidden;
        transform: rotate(45deg) translate(-414px, 410px) !important;
    }
}

@media not screen and (min-width: 390px) {
    .honeycomb-grid {
        left: 50%;
    }
}