.about {
    padding-block: clamp(40px, 6vw, 70px);
    padding-inline: max(clamp(16px, 5vw, 100px), calc((100% - 1920px) / 2));
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(24px, 4vw, 60px);
    font-family: 'karla', 'sans-serif';
    overflow: hidden;
    min-height: var(--section-min-height);
    width: 100%;
}

.about .section-intro {
    flex: 1 1 clamp(280px, 40vw, 700px);
    width: unset;
}

.about__image {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    margin: 20px;
    border-radius: 40px;
    width: clamp(220px, 38vw, 600px);
    aspect-ratio: 1;
}

.about__image::before {
    content: "";
    position: absolute;
    top: 40px;
    left: -40px;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
            45deg,
            var(--primary-color),
            var(--primary-color) 2px,
            transparent 2px,
            transparent 32px
    );
    border-radius: 40px;
    z-index: 0;
}

.about__image img {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}

.about__profile {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 0;
}

.about__profile-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.about__profile-item p {
    font-size: clamp(15px, 1.5vw, 17px);
    text-align: justify;
    color: var(--text-color-hoverable);
}

.about__profile-item p:hover {
    color: var(--text-color);
}