a {
    text-decoration: none;
    color: black;
}

.default-intro-box {
    /*width: 800px;*/
    max-width: 90%;
    margin: auto;
    aspect-ratio: 3/2;
    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;*/
    overflow: auto;
    /*color: black;*/
}

.intro-box-image {
    width: 50%;
    aspect-ratio: 1/1;
    float: left;
}

.default-intro-box > img {
    /*position: absolute;
    top: 0;
    width: 100%;
    border-radius: 16px 16px 0px 0px;*/
    width: 100%;
    margin: 0px 5px 5px 0px;
}

/*.default-intro-box > div {
    float: left;
    display: inline;
}*/

.default-intro-box h2 {
    /*position: absolute;
    bottom: 2%;*/
    margin: 5px 5px;
    padding: 10px 10px;
    /*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);*/
}

/*.default-intro-box p {
    padding: 10px 10px;
}*/

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

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

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

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

.default-intro-box::after {
    clear: left;
}

@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 */
    /*.default-intro-box > img {
        width: 30%;
    }*/
    .default-intro-box {
        aspect-ratio: 5/2;
    }
    .intro-box-image {
        width: 35%;
    }
    .default-intro-box h2 {
        /*bottom: 5%;*/
        font-size: 16px;
    }
}

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

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

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