.paragraph--type--circuit{
    margin-bottom: 10rem;
}
@media(min-width: 76.8rem){
    .paragraph--type--circuit{
        margin-bottom: 14rem;
    }
}
.paragraph--type--circuit .circuit-text{
    text-align: center;
    max-width: 70rem;
    margin: 0 auto 6rem;
    padding: 3.2rem 2.4rem 0;
}

.paragraph--type--circuit .circuit-text h2{
    font-weight: 700;
    font-size: 2.4rem;
}

.paragraph--type--circuit .circuit-text span{
    color: var(--secondary-color);
}

.paragraph--type--circuit h2.circuit-title{
    font-size: 3.6rem;
    font-weight: 700;
    text-align: center;
}
@media(min-width: 76.8rem){
    .paragraph--type--circuit h2.circuit-title{
        font-size: 4.8rem;
    }  
}

.paragraph--type--circuit .btn-big-inside{
    margin: 4rem auto 2rem;
    display: flex;
    justify-content: center;
}

.paragraph--type--circuit .btn-big-inside a{
    text-align: center;
}

/* Boxes */

.circuit-boxes {
    display: grid;
    grid-template-columns:1fr;
    gap: 0;
    width: 100%;
}
@media(width > 64rem){
    .circuit-boxes{
        width: 90%;
        margin: 0 auto;
    }
}

/* Boxes row */

.circuit-boxes-row{
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}
@media(width > 1024px){
    .circuit-boxes-row{
        grid-template-columns: repeat(3, 1fr);
    }
}

.circuit-boxes-row.circuit-first{
        grid-template-columns: 1fr min-content;
        row-gap: 3.2rem;
}
@media(width > 1024px){
    .circuit-boxes-row.circuit-first{
        grid-template-columns: 1fr min-content 1fr;
        margin-bottom: 0;
        row-gap: 0;
    }
}

/* Backgrounds */

.circuit-content{
    grid-area: content;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

.circuit-content-image{
    grid-area: content-image;
}

.circuit-content-text{
    padding: 1.6rem;
    width: 100%;
}
@media(width > 1024px){
    .circuit-content-text{
        padding: 3.2rem;
    } 
}

.circuit-left-to-bottom,
.circuit-bottom-to-right,
.circuit-top-to-right,
.circuit-left-to-top{
    display: block;
    height: 60px;
    width: 100px;
    background-size: 60px;
    background-repeat: no-repeat;
}

.circuit-left-to-bottom{
    grid-area: left-to-bottom;
    background-image: url('../../img/left-to-bottom.png');
    background-position: left top;
}

.circuit-bottom-to-right{
    grid-area: bottom-to-right;
    background-image: url('../../img/bottom-to-right.png');
    background-position: right top;
}

.circuit-top-to-right{
    grid-area: top-to-right;
    background-image: url('../../img/top-to-right.png');
    background-position: right bottom;
}

.circuit-left-to-top{
    grid-area: left-to-top;
    background-image: url('../../img/left-to-top.png');
    background-position: left bottom;
}

.circuit-top,
.circuit-bottom,
.circuit-bottom-middle{
    display: block;
    height: 60px;
    width: 100%;
    background-image: url('../../img/horizontal.png');
    background-size: 100px 20px;
    background-repeat: repeat-x;
}

.circuit-top{
    grid-area: top;
    background-position: top;
}
.circuit-bottom-middle{
    grid-area: bottom-middle;
    background-position: bottom;
}

.circuit-bottom{
    grid-area: bottom;
    background-position: bottom;
}

.circuit-left,
.circuit-right{
    display: block;
    height: 100%;
    width: 100px;
    background-image: url('../../img/vertical.png');
    background-size: 20px 100px;
    background-repeat: repeat-y;
    background-position: center;
}

.circuit-left{
    grid-area: left;
}

.circuit-right{
    grid-area: right;
}

.circuit-empty{
    grid-area: empty;
    display: block;
    height: 60px;
    width: 100px;
}
.circuit-end-left,
.circuit-end-right{
    display: block;
    height: 60px;
    width: 10px;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

.circuit-end-right{
    grid-area: end-right;
    background-image: url('../../img/end-right.png');
    background-position: bottom left;
}

.circuit-end-left{
    grid-area: end-left;
    background-image: url('../../img/end-left.png');
    background-position: top right;
}

/* Box */

.circuit-box {
    display: grid;
    align-items: center;
    justify-content: center;
}

.circuit-box img { 
    display: block;
    max-width: 70%;
    height: auto;
}

/* Box One*/

.circuit-box.circuit-one{
    grid-template-columns: 10px 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas: "end-left top"
                         "content content";
    margin-left: 3.2rem;
}
@media(width > 1024px){
    .circuit-box.circuit-one{
        margin-left: 0;
    }
}
/* Box Two*/

.circuit-box.circuit-two{
    grid-template-columns: 100px;
    grid-template-rows: 60px 1fr 60px;
    grid-template-areas: "left-to-bottom"
                         "left"
                         "top-to-right";
}
.circuit-box.circuit-two .circuit-bottom,
.circuit-box.circuit-two .circuit-content,
.circuit-box.circuit-two .circuit-bottom-to-right,
.circuit-box.circuit-two .circuit-left-to-top,
.circuit-box.circuit-two .circuit-right{
    display: none;
}

@media(width > 1024px){
    .circuit-box.circuit-two{
        grid-template-columns: 100px 80px;
        grid-template-rows: 60px 1fr 60px;
        grid-template-areas: "left-to-bottom    content"
                             "left              content"
                             "top-to-right      bottom";
    }
    
    .circuit-box.circuit-two .circuit-bottom,
    .circuit-box.circuit-two .circuit-content{
        display: block;
    }
    
    .circuit-box.circuit-two img{
        min-width: 48px;
        padding-right: 3.2rem;
        height: auto;
   }
}

@media(width > 1024px){
    .circuit-box.circuit-two{
        grid-template-columns: 100px 1fr 100px;
        grid-template-rows: 60px 1fr 60px;
        grid-template-areas: "left-to-bottom    content     bottom-to-right"
                            "left              content      right"
                            "top-to-right      bottom      left-to-top";
    }
    .circuit-box.circuit-two .circuit-bottom-to-right,
    .circuit-box.circuit-two .circuit-left-to-top,
    .circuit-box.circuit-two .circuit-right{
        display: block;
    }
    .circuit-box.circuit-two img{
        min-width: 100px;
        padding-right: 0;
    }
}

/* Box Three*/

.circuit-box.circuit-three{
    grid-column: span 2; 
    grid-template-columns: 1fr 100px;
    grid-template-rows: 60px 1fr;
    grid-template-areas: "top       left-to-bottom"
                         "content   right";
}
@media(width > 1024px){
    .circuit-box.circuit-three{
        grid-column: span 1;
    }
}

/* Box Four*/

.circuit-box.circuit-four{
    grid-column: span 3;
    grid-template-columns: 1fr 100px;
    grid-template-areas: "content right";
}

.circuit-box.circuit-four .circuit-content-text img{
    display: none;
}
@media(min-width:1024px){
    .circuit-box.circuit-four .circuit-content-text{
        display: flex;
        gap: 2.4rem;
        justify-content: space-between;
    }
    .circuit-box.circuit-four .circuit-content-text img{
        display: block;
    }
}

/* Box Five*/

.circuit-box.circuit-five{
    position: relative;
    order: 2;
    margin-top: -20px;
    grid-template-columns: 1fr 100px;
    grid-template-rows: 60px 1fr 60px;
    grid-template-areas: "content   left-to-bottom"
                         "content   right"
                         "bottom left-to-top";
}

.circuit-box.circuit-five .circuit-left,  
.circuit-box.circuit-five .circuit-bottom-to-right,
.circuit-box.circuit-five .circuit-top,
.circuit-box.circuit-five .circuit-top-to-right{
    display: none;
}

.circuit-box.circuit-five .circuit-content-text{
    padding: 9.6rem 3.2rem 3.2rem;
}

.circuit-box.circuit-five .circuit-content-image{
    height: 215px;
}

.circuit-box.circuit-five img{
    position: absolute;
    bottom: 20px;
    left: 30px;
    right: 0;
    margin: 0 auto;
}

@media(width > 1024px){
  .circuit-box.circuit-five{
    margin-top: 0;
    order: initial;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 60px 1fr 60px;
    grid-template-areas: "bottom-to-right   top"
                         "left              content"
                         "top-to-right      bottom";
    }
    .circuit-box.circuit-five .circuit-left,  
    .circuit-box.circuit-five .circuit-bottom-to-right,
    .circuit-box.circuit-five .circuit-top,
    .circuit-box.circuit-five .circuit-top-to-right{
        display: block;
    }
    .circuit-box.circuit-five .circuit-left-to-bottom,
    .circuit-box.circuit-five .circuit-right,
    .circuit-box.circuit-five .circuit-left-to-top{
        display: none;
    }
    .circuit-box.circuit-five .circuit-content-text{
        padding: 3.2rem;
    }
}

/* Box Six*/

.circuit-box.circuit-six{
    position: relative;
    order: 1;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 60px 1fr 60px;
    grid-template-areas: "left top top"
                         "left content content"
                         "top-to-right bottom empty";
}

.circuit-box.circuit-six .circuit-top{
    display: none;
}

.circuit-box.circuit-six .circuit-content-text{
    padding: 3.2rem 4.8rem 3.2rem 0;
}

.circuit-box.circuit-six .circuit-content-image{
    height: 215px;
}

.circuit-box.circuit-six img{
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

@media(width > 1024px){
   .circuit-box.circuit-six{
        order: initial;
        grid-template-columns: 1fr;
        grid-template-rows: 60px 1fr 60px;
        grid-template-areas:"top"
                            "content"
                            "bottom";
    }
    .circuit-box.circuit-six .circuit-left,
    .circuit-box.circuit-six .circuit-top-to-right,
    .circuit-box.circuit-six .circuit-left-to-bottom,
    .circuit-box.circuit-six .circuit-empty{
        display: none;
    }
    .circuit-box.circuit-six .circuit-top{
        display: block;
    }
    .circuit-box.circuit-six .circuit-content-text{
        padding: 3.2rem;
    }
}

/* Box Seven */

.circuit-box.circuit-seven{
    order: 0;
    grid-template-columns: 1fr;
}
.circuit-box.circuit-seven .circuit-seven-top{
    position: relative;
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 1fr 60px;
    grid-template-areas: "content-image     content-image   right"
                         "empty     bottom-middle   left-to-top";
}
.circuit-box.circuit-seven .circuit-seven-bottom{
    position: relative;
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas: "bottom-to-right content"
                         "left content";
    margin-top: -20px;

}

.circuit-box.circuit-seven .circuit-seven-bottom .circuit-content{
    margin-top: 40px;
    padding: 0 30px 0 0;
}
.circuit-box.circuit-seven .circuit-seven-bottom .circuit-content .circuit-content-text{
    padding: 3.2rem 4.8rem 0 0;
}

.circuit-box.circuit-seven .circuit-seven-top .circuit-left,
.circuit-box.circuit-seven .circuit-bottom,
.circuit-box.circuit-seven .circuit-top-to-right,
.circuit-box.circuit-seven .circuit-left-to-bottom,
.circuit-box.circuit-seven .circuit-end-right{
    display: none;
}

.circuit-box.circuit-seven .circuit-seven-top .circuit-content-image{
    height: 18rem;
}

.circuit-box.circuit-seven img{
    min-width: 140px;
    height: auto;
    bottom: 20px;
    left: 0;
    right: 0;
    position: absolute;
    margin: 0 auto;
}

@media(width > 1024px){
    .circuit-box.circuit-seven{
        order: initial;
    }
    .circuit-box.circuit-seven .circuit-seven-top{
        height: 100%;
        grid-template-columns: 100px 1fr 100px;
        grid-template-rows: 60px 1fr 60px;
        grid-template-areas:"left-to-bottom    content-image   right"
                            "left              content-image   right"
                            "top-to-right      bottom-middle   left-to-top";
    }
    .circuit-box.circuit-seven .circuit-seven-bottom{
        height: 100%;
        margin-top: 0;
        grid-template-columns: 100px 1fr 100px;
        grid-template-rows: 1fr 60px;
        grid-template-areas:"content           content         content"
                            "bottom            bottom          end-right";
    }
    .circuit-box.circuit-seven .circuit-seven-top .circuit-left,
    .circuit-box.circuit-seven .circuit-bottom,
    .circuit-box.circuit-seven .circuit-top-to-right,
    .circuit-box.circuit-seven .circuit-left-to-bottom,
    .circuit-box.circuit-seven .circuit-end-right{
        display: block;
    }

    .circuit-box.circuit-seven .circuit-empty,
    .circuit-box.circuit-seven .circuit-bottom-to-right,
    .circuit-box.circuit-seven .circuit-seven-bottom .circuit-left{
        display: none;
    }
    .circuit-box.circuit-seven .circuit-seven-bottom .circuit-content{
        padding: 0 60px
    }
    .circuit-box.circuit-seven .circuit-seven-bottom .circuit-content .circuit-content-text{
        padding: 3.2rem;
    }
}

/* Box Eight*/

.circuit-box.circuit-eight{

    grid-template-columns: 100px 1fr;
    grid-template-rows: 1fr 60px;
    grid-template-areas: "left          content"
                         "top-to-right  bottom";
}
.circuit-box.circuit-eight img{
    width: min(100%, 240px);
    height: auto;
    margin-bottom: -50px;
}

/* Box Nine & Ten*/

.circuit-box.circuit-nine,
.circuit-box.circuit-ten{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 60px;
    grid-template-areas: "content"
                         "bottom";
}

.circuit-box.circuit-nine img{
    width: min(100%, 315px);
    height: auto;
    margin-bottom: -50px;
}

/* Box Eleven */

.circuit-box.circuit-eleven .circuit-content{
    margin-top: 60px;
}

/* Box Twelve*/

.circuit-box.circuit-twelve{
    grid-template-columns: 1fr 60px;
    grid-template-rows: 1fr 60px;
    grid-template-areas: "content content"
                         "bottom end-right";
}

@media(width > 1024px){
    .circuit-box.circuit-twelve{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-column: span 2;
        justify-content: flex-start;
    }
    .circuit-box.circuit-twelve .circuit-bottom,
    .circuit-box.circuit-twelve .circuit-end-right{
        display: none;
    }
    .circuit-box.circuit-twelve .circuit-content{
        margin-top: 60px;
    }
}

.circuit-box.circuit-twelve .circuit-content{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    max-width: 64rem;
}

.circuit-box.circuit-twelve .circuit-content-image{
    padding-right: 30px;
}

.circuit-box.circuit-twelve img{
    min-width: 122px;
    height: auto;
    margin-bottom:0;
}