.about{
	display:flex;
    background: url(/mdm/assets/images/about.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: bottom;
    background-position-x: center;
}

.about__explanation{
    display: flex;
    flex-direction: column;
    width: 51%;
    background: var(--blue-2);
    color: var(--white);
    padding: 90px 0px 171px 105px;
    clip-path: polygon(0 0, 72% 0, 94% 100%, 0% 100%);
}

.about__clip{
	display:none;
}

.about__title{
    font-size: 36px;
    line-height: 42px;
    font-weight: 900;
    margin: 0;
}

.about__second-title{
    font-size: 96px;
    line-height: 90px;
    font-weight: 900;
    margin: 0 0 60px 0;
    letter-spacing: 9.6px;
}

.about__text {
    font-size: 18px;
    line-height: 23.4px;
    margin: 0;
}

.about__note {
    font-size: 24px;
    line-height: 31.2px;
    font-weight: 700;
    margin: 70px 0;
}

.about__button{
    display: grid;
    gap: 30px;
	grid-template-columns: repeat(auto-fill, 262px);
}

@media screen and (max-width: 1299px) {

    .about {
        background: none;
    }

    .about__explanation{
        width: 100%;
        clip-path: none;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 767px) {

    .about__button {
        flex-direction: column;
        align-items: flex-start;
    }

    .about__explanation{
        padding: 90px 0px 171px 60px;
    }

}

@media screen and (max-width: 575px) {
    .about__second-title{
        font-size: 95px;
    }

    .about__explanation{
        padding: 90px 30px 171px 30px;
    }
}

@media screen and (min-width: 1540px) {
    .about__explanation{
        width: 53%;
        clip-path: polygon(0 0, 73% 0, 92% 100%, 0% 100%);
    }
}

@media screen and (min-width: 1640px) {
    .about__explanation{
        width: 54%;
        clip-path: polygon(0 0, 78% 0, 96% 100%, 0% 100%);
    }
}

@media screen and (min-width: 1740px) {
    .about{
        background-size: 100% 120%;
    }
}

@media screen and (min-width: 1920px) {
    .about__clip{
		display: block;
    	width: 46%;
    	clip-path: polygon(72% 0%, 100% 0, 100% 100%, 94% 100%);
    	background: var(--blue-2);
	}
}

@media screen and (min-width: 2100px) {
    .about{
        background-size: 90% 120%;
        background-position-x: right;

    }

    .about__explanation {
        width: 59%;
        clip-path: polygon(0 0, 87% 0, 100% 100%, 0% 100%);
    }
}

@media screen and (min-width: 2300px) {
    .about{
        background-size: 89% 120%;
        background-position-x: right;
    }

    .about__explanation {
        width: 62%;
        clip-path: polygon(0 0, 86% 0, 100% 100%, 0% 100%);
    }
}