.tool-box {
    /*width: 800px;*/
    max-width: 90%;
    margin: auto;
    aspect-ratio: 120/63;
    border-radius: 16px;
    -webkit-box-shadow: 0 4px 30px #D52600;
    -ms-box-shadow: 0 4px 30px #D52600;
    -moz-box-shadow: 0 4px 30px #D52600;
    -o-box-shadow: 0 4px 30px #D52600;
    box-shadow: 0 4px 30px #D52600;
    /*-webkit-backdrop-filter: blur(1px);
    -ms-backdrop-filter: blur(1px);
    -moz-backdrop-filter: blur(1px);
    -o-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);*/
    border: 3px outset rgba(0, 0, 0, 0.3);
    /*color: rgba(255, 255, 255, 0.6);*/
    font-weight: 600;
    /*color: rgba(255, 255, 255, 0.6);*/
    background-color: rgba(0, 0, 0, 0.9);
    position: relative;
}

.tool-box > img {
    position: absolute;
    top: 0;
    width: 100%;
    border-radius: 16px 16px 16px 16px;
}

.tool-box > h2 {
    position: absolute;
    bottom: 2%;
    margin: 0px 10px;
    /*padding: 10px 0px;*/
    /*container-name: toolBox;*/
    /*container-type: inline-size;*/
    font-size: 15px;
    color: #ffffff;
    text-shadow:
      0 0 7px #ffffff,
      0 0 10px #ffffff,
      0 0 21px #ffffff,
      0 0 42px #D52600,
      0 0 82px #D52600,
      0 0 92px #D52600,
      0 0 102px #D52600,
      0 0 151px #D52600;
    /*background-color: rgba(0, 0, 0, 0.8);*/
}

/* Position absolute can't use @container? */

/*@container toolBox (min-width: 500px) {
    .tool-box > h2 {
        font-size: 20px;
    }
}

@container toolBox (min-width: 550px) {
    .tool-box > h2 {
        font-size: 24px;
    }
}

@container toolBox (min-width: 600px) {
    .tool-box > h2 {
        font-size: 28px;
    }
}*/

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */
}

@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
  
}

@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
    .tool-box > h2 {
        bottom: 5%;
        font-size: 16px;
    }
}

@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */
    .tool-box > h2 {
        font-size: 20px;
    }
}

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
  
}

@media (min-width:1281px) { /* hi-res laptops and desktops */
    .tool-box > h2 {
        font-size: 24px;
    }
}