:root{
    --main: #c71b18;
    --sub1: #873332;
    --sub2: #c61917;
    --sub3: #472d2c;
    --sub4: #C7A318;
    --back: #f1f1f1;
}

.section_content_column.column_1{
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 100px 1fr 200px;
    background-image: linear-gradient(to bottom, transparent 100px, var(--sub3) 100px);
}
.section_content_box.type_1.box_1{
    grid-area: 2 / 1 / 4 / 2;
    padding: 40px;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
}
.section_content_box.type_1.box_2{
    grid-area: 1 / 2 / 3 / 3;
    overflow: hidden;
}
.section_content_box.type_1.box_2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section_text_box.box_1{
    align-items: flex-start;
    gap: 20px;
}
.section_text.strong{
    font-weight: bold;
}
.section_text.text_1{
    font-size: 1.4rem;
    color: white;
}

.text_box_image{
    position: absolute;
    height: 200px;
    bottom: -30px;
    right: -30px;
    padding: 10px;
}
.text_box_image img{
    height: 100%;
    width: auto;
}

.section.section_3.section_under{
    background-color: rgba(135, 51, 50, 0.1);
}
.column_wrapper{
    max-width: 1200px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(max-content, max-content);
    grid-template-areas: 
    "a b"
    "c c";
    gap: 40px;
}
.section_content_column.column_2{
    align-items: center;
    &.type_1{
        grid-area: a;
    }
    &.type_2{
        grid-area: b;
    }
    &.type_3{
        grid-area: c;
    }
}
.section_content_box.type_2{
    &.box_1{
        align-items: center;
        background: linear-gradient(to top, var(--back) 50%, transparent 50%);
        &::before,&::after{
            content: "";
            position: absolute;
        }
    }
    &.box_2{
        padding: 40px;
        background: var(--back);
        &::before, &::after{
            content: "";
            position: absolute;
            width: 20px;
            aspect-ratio: 1;
        }
        &::before{
            left: 10px;
            top: 10px;
            border-top: 2px solid var(--sub4);
            border-left: 2px solid var(--sub4);
        }
        &::after{
            bottom: 10px;
            right: 10px;
            border-right: 2px solid var(--sub4);
            border-bottom: 2px solid var(--sub4);
        }
    }
}
.content_column_title{
    font-size: 3.2rem;
    color: var(--sub4);
    padding: 10px 20px;
    background: var(--sub2);
    border: 2px solid var(--sub4);
    &::first-letter{
        color: var(--back);
    }
}
.section_text_row{
    max-width: 700px;
    align-self: center;
    align-items: flex-start;
    gap: 20px;
    padding: 10px 0;
}

.section_content_column.column_3{
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
}
.section_image_container.container_1,.section_content_box.type_3{
    flex: 1;
}
.section_image_container.container_1::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -20px;
    right: -20px;
    background-color: var(--main);
    background-image: repeating-linear-gradient(30deg, transparent, transparent 12px, rgb(255, 255, 255, 0.5) 14px),repeating-linear-gradient(-30deg, transparent, transparent 12px, rgb(255, 255, 255, 0.5) 14px);
}
.section_image_container.container_1 img{
    width: 100%;
    height: auto;
    z-index: 1;
}
.section_content_box.type_3{
    padding: 40px;
    padding-top: 0;
    gap: 40px;
}
.section_text.text_2{
    font-size: 1.4rem;
}
.section_text.text_3{
    font-size: 1.6rem;
    font-weight: 600;
    &.strong{
        color: var(--sub2);
    }
}
@media all and (max-width:1280px){

}
@media all and (max-width:960px){
    .section_content_column.column_3{
        padding-bottom: 0px;
    }
}
@media all and (max-width:768px){
    .section_content_column.column_1{
        grid-template-columns: 100px 1fr 100px;
        grid-template-rows: repeat(2, max-content);
    }
    .section_content_box.type_1.box_1{
        grid-area: 2 / 1 / 3 / 3;
        gap: 20px;
    }
    .section_content_box.type_1.box_2{
        grid-area: 1 / 2 / 2 / 4;
    }
    .text_box_image{
        height: 120px;
    }
    .section_text_box.box_1{
        gap: 10px;
    }
    .section_content_column.column_3{
        flex-direction: column;
        align-items: flex-start;
    }
    .section_image_container.container_1,.section_content_box.type_3{
        flex: none;
        width: calc(100% - 50px);
    }
    .section_content_box.type_3{
        padding-top: 40px;
        align-self: flex-end;
        gap: 20px;
    }
    .column_wrapper{
        grid-template-columns: 1fr;
        grid-template-areas: 
        "a"
        "b"
        "c";
        gap: 20px;
    }
}
@media all and (max-width:450px){
    .section_content_column.column_1{
        grid-template-columns: 50px 1fr 50px;
    }
    .section_content_box.type_1.box_1{
        grid-area: 2 / 1 / 3 / 4;
    }
    .section_content_box.type_1.box_2{
        grid-area: 1 / 2 / 2 / 4;
    }
    .section_image_container.container_1,.section_content_box.type_3{
        width: 100%;
    }
    .content_column_title{
        font-size: 2.4rem;
        padding: 5px 15px;
    }
    .section_text_row{
        flex-wrap: wrap;
        gap: 10px;
        .section_text.text_3{
            text-align: center;
        }
    }
    .section_text.text_3{
        font-size: 1.4rem;
    }
}
@media (any-hover: hover){
    
}
