@import url("/css/templates/secondary-header.css");
.work_header{
    background: url("/resources/images/work/header.jpg");
    background-position: center;
    background-size: cover;
}
.work_about{
    padding: 5rem 5vw;
    line-height: 1;
    background-color: hsl(0, 0%, 95%);
    border-bottom: 1px solid hsl(0, 0%, 90%);
    .container{
        max-width: 1300px;
        margin: 0 auto;
        display: flex;
        gap: 3rem;
        align-items: center;
        img{
            display: block;
            width: 600px;
            flex: 0 0 50%;
            object-fit: cover;
            object-position: center;
            box-shadow: 0 0 10px hsl(0, 0%, 0%, 0.5);
            aspect-ratio: 4/3;
            border-radius: 0.5rem;
        }
        .desc{
            .title{
                font-size: 2.3rem;
                line-height: 1.2;
                margin-bottom: 2.5rem;
            }
            .desc{
                line-height: 1.7;
                margin-top: 2rem;
            }
            .bold{
                font-weight: 700;
                font-size: 1rem;
                color: hsl(0, 0%, 10%);
            }
        }
    }
    @media screen and (max-width: 1200px) {
        padding: 5rem 5vw;
        .container{
            flex-direction: column;
            max-width: 786px;
            gap: 4rem;
            img{
                width: 100%;
            }
        }
    }
    @media screen and (max-width: 450px) {
        padding: 5rem 5vw;
        .container{
            .desc{
                .title{
                    font-size: 2rem;
                }
            }
        }
    }
}
.poster{
    box-shadow: 0 0 10px hsl(0, 0%, 0%, 0.3);
    .columns{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .column{
            background-position: center;
            background-size: cover;
            overflow: hidden;
            transition: 0.2s;
            .overlay{
                padding: 0 0;
                background: linear-gradient(to right, hsl(200, 100%, 10%, 1), hsl(200, 100%, 0%, 0.5) 50%);
                height: 100%;
                width: 100%;
                padding: 10rem 2vw;
                box-sizing: border-box;
                color: white;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .section-title{
                    font-size: 2rem;
                    line-height: 1.2;
                    margin-bottom: 2rem;
                    max-width: 30ch;
                }
                .desc{
                    line-height: 1.7;
                    max-width: 60ch;
                }
                &.right-align{
                    background: linear-gradient(to left, hsl(200, 100%, 10%, 1), hsl(200, 100%, 0%, 0.5) 50%);
                    .section-title{
                        align-self: flex-end;
                    }
                    .desc{
                        align-self: flex-end;
                        text-align: right;
                    }
                }
            }
        }
    }
    @media screen and (max-width: 1200px){
        .columns{
            grid-template-columns: 1fr;
            .column{
                background-size: cover;
                .overlay{
                    padding: 10rem 5vw;
                }
                &:hover{
                    background-size: cover;
                }
            }
        }
    }
    @media screen and (max-width: 786px){
        .columns{
            grid-template-columns: 1fr;
            .column{
                background-size: cover;
                .overlay{
                    padding: 7rem 5vw;
                }
            }
        }
    }
}
.many-fields{
    .columns{
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        gap: 1rem;
        .clip-container{
            flex: 60%;
            filter:drop-shadow(0 0 10px hsl(200, 100%, 0%, 0.3));
            .img-container{
                height: 100%;
                overflow: hidden;
                clip-path: polygon(5rem 0, 100% 0, calc(100% - 5rem) 100%, 0% 100%);
                img{
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: cover;
                }
            }
        }
        .text{
            padding: 5rem 0 5rem 5vw;
            flex: 50%;
            .section-title{
                font-size: 2rem;
                line-height: 1.2;
                margin-bottom: 1.5rem;
            }
            .desc{
                margin-top: 1.5rem;
                line-height: 1.7;
            }
        }
    }
    @media screen and (max-width: 1200px){
        .columns{
            .clip-container{
                .img-container{
                    clip-path: polygon(5rem 0, 100% 0, 100% 100%, 0% 100%);
                }
            }
        }
    }
    @media screen and (max-width: 786px){
        .columns{
            flex-direction: column;
            .text{
                padding: 5rem 5vw 3rem 5vw;
            }
            .clip-container{
                .img-container{
                    clip-path: polygon(0 0, 100% 2rem, 100% 100%, 0% 100%);
                }
            }
        }
    }
}
.offers{
    background-color: hsl(0, 0%, 95%);
    box-shadow:  0 0 10px hsl(0, 0%, 0%, 0.3);
    z-index: 1;
    position: relative;
    padding: 4rem 5vw;
    .wrapper{
        max-width: 1200px;
        margin: 0 auto;
        .top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            .title-container{
                .summary{
                    font-size: 1.2rem;
                    line-height: 1;
                    margin-bottom: 0.3rem;
                }
                .section-title{
                    font-size: 2.3rem;
                    line-height: 1.2;
                }
            }
            .contact{
                .contact-title{
                    font-size: 1.2rem;
                    color: hsl(0, 0%, 30%);
                }
                .links{
                    display: flex;
                    gap: 1rem;
                    margin-top: 1rem;
                    justify-content: end;
                    .link{
                        background-color: hsl(0, 0%, 10%);
                        color: white;
                        padding: 1rem 2rem;
                        border-radius: 0.5rem;
                        font-weight: 700;
                        box-shadow: 0 0 5px hsl(0, 0%, 0%, 0.5);
                        text-decoration: none;
                        &:hover{
                            background-color: hsl(0, 0%, 20%);
                        }
                    }
                }
            }
        }
        .grid{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
            margin-bottom: 2rem;
            .card{
                background-color: white;
                border-radius: 0.5rem;
                padding: 2rem;
                box-shadow: 0 0 10px hsl(0, 0%, 0%, 0.2);
                display: flex;
                flex-direction: column;
                .card-topper{
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 1rem;
                    border-bottom: 1px solid hsl(0, 0%, 60%);
                    .date{
                        font-size: 0.9rem;
                    }
                    .target{
                        font-weight: 700;
                    }
                }
                .position-title{
                    font-size: 1.5rem;
                    margin-bottom: 1rem;
                }
                .attention{
                    margin-bottom: 1rem;
                    background: linear-gradient(20deg, hsl(200, 100%, 40%) 0%, hsl(200, 100%, 50%) 100%);
                    box-shadow: 0 2px 5px hsl(0, 0%, 0%, 0.2);
                    color: white;
                    width: fit-content;
                    padding: 0.4rem 1rem;
                    border-radius: 100px;
                }
                .position-desc{
                    line-height: 1.6;
                    margin-bottom: 1rem;
                }
                .extra{
                    margin-bottom: 1rem;
                    display: block;
                    line-height: 1.6;
                }
                .links{
                    display: flex;
                    gap: 0.5rem;
                    margin-top: auto;
                    .link{
                        display: block;
                        color: hsl(200, 100%, 30%);
                        font-weight: 600;
                        &:hover{
                            color: hsl(200, 100%, 40%);
                        }
                    }
                }
            }
        }
        .cta{
            font-size: 1.1rem;
            font-weight: 600;
        }
    }
    @media screen and (max-width: 1200px){
        padding: 4rem 5vw;
        .wrapper{
            .top{
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
                .contact{
                    width: 100%;
                    .links{
                        justify-content: stretch;
                    }
                }
            }
            .grid{
                grid-template-columns: 1fr;
                gap: 2rem;
            }
        }
    }
    @media screen and (max-width: 786px){
        padding: 4rem 5vw;
        .wrapper{
            .top{
                .title-container{
                    .section-title{
                        font-size: 2rem;
                    }
                }
            }
        }
    }
    @media screen and (max-width: 450px){
        padding: 4rem 5vw;
        .wrapper{
            .top{
                .contact{
                    .links{
                        flex-direction: column;
                        gap: 1rem;
                        text-align: center;
                    }
                }
            }
        }
    }
}