@import url("../style_guideline/color_pallete.css");

:root {
    --work_photo_1: url(../../media/works_headline_content/stock_section.png);
    --work_photo_2: url(../../media/works_headline_content/hero_section.png);
    --work_photo_3: url(../../media/works_headline_content/profile_section.png);
}

.work_photo_1 {content: var(--work_photo_1);}
.work_photo_2 {content: var(--work_photo_2);}
.work_photo_3 {content: var(--work_photo_3);}

.work_headline_lining_glass {
    height: auto;
    width: 845px;
    /* margin-inline: auto; */

    padding: 20px;

	backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(20px);
	background: var(--brand_color_beige_40);
	box-shadow: 0 0 80px var(--brand_color_beige_40);
    border: 4px solid var(--brand_color_beige_20);
    border-radius: 20px;
}

@media(max-width: 920px) {
    .work_headline_lining_glass {
        width: 500px;
    }
}

.work_headline_lining_glass h1 {
    margin: 0;
    font-size: 36px;
}

.work_headline_lining_glass h2 {
    margin: 0;
    padding-left: 178px;
    font-size: 36px;
}

.work_headline_lining_glass p {
    margin: 0;
    padding-top: 40px;
    font-size: 24px;
}

.work_headline_lining_glass a {
    color: black;
    text-decoration: none;
    font-size: 18px;
    border: 1px solid var(--brand_color_purple);
    border-radius: 50% / 80px;;
    padding-block: 5px;
    padding-inline: 10px;
    transition: 0.4s;
    margin-right: 10px;
}

.work_headline_lining_glass a:hover {
    background-color: var(--brand_color_green);
    border-color: var(--brand_color_green);
}

.work_headline_lining_glass div {
    margin-top: 45px;
}

.image_container {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    /* left: -50%; */
    height: 250px;
    /* -webkit-mask-image: linear-gradient(to left, black 20%, transparent 20%); */
    mask-image: linear-gradient(to right, transparent 0% 2%, black 5% 95%, transparent 98% 100%);
    mask-size: 100% 100%;
    mask-position: 0 0;
    mask-repeat: no-repeat;
    /* left: -5vw; */
    /* background-color: chartreuse; */
    display: flex;
    justify-content: center;
    /* background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(255, 255, 255, 0)); */
}

@media(max-width: 920px) {
    .image_container {
        height: 200px;
    }
}

.image_container img {
    position: relative;
    border-radius: 5px;
    opacity: 1;
    margin-inline: 5px;
    object-fit: cover;
    transition: 0.4s;
}

.image_container .work_photo_1:hover {
    margin-left: 61%;
}

.image_container .work_photo_3:hover {
    margin-right: 61%;
}