
@import "mixins";

.ftm_404_content_wrapper{
    .content_container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
      
        .left-column {
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: 10px;
            justify-content: center;
            align-items: center;
            align-content: center;
            text-align: center;
        
      
          .child-div {
            margin: 5px;

            > h1 {
                font-size: 4em;
                font-weight: 700;
                line-height: 1;
                margin: 33px 0 0;
                font-family: helvetica;
                color: #000;
            }

            > b {
                font-size: 1.5em;
                font-weight: 700;
                line-height: 1.1;
                font-family: helvetica;
            }
          }
        }
      
        .right-column {
          flex: 2; // Takes 2/3 of the container width
          padding: 10px;
      
          .child-div {
            padding: 10px;
            margin: 5px;
      
            img {
                width: 100%;
                height: auto;
                display: block;
                max-width: 600px;
                aspect-ratio: 1 / 1;
            }
          }
        }
      }
      
}

@include md{
    .ftm_404_content_wrapper{
        .content_container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            align-items: center;

            .left-column {
                display: flex;
                flex-direction: column;
                flex: 1;
                padding: 10px;
                justify-content: center;
                align-items: flex-start;
                align-content: center;
                text-align: left;

                .child-div {        
                    > h1 {
                        font-size: 122px;
                        font-weight: 700;
                        line-height: 1;
                        margin: 33px 0 0;
                        font-family: helvetica;
                        color: #000;
                    }
        
                    > b {
                        font-size: 34px;
                        font-weight: 700;
                        line-height: 1.1;
                        font-family: helvetica;
                    }
                  }
            }
        }
    }
}
