section.about {
    background-color: var(--color-snow-gray);
}

.about .container {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
}

.wwd-container {
    display: flex;
    gap: var(--spacing);
}

.wwd-box {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) / 2);
    padding: var(--spacing);
    background-color: var(--color-light-blue);
}

.wwd-box-heading {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) / 2);
}

.wwd-box-title {
    font-size: 22px;
    font-weight: 600;
}

.wwd-addon-text {
    width: 100%;
    max-width: 600px;
    text-align: center;
    margin: var(--spacing) auto 0 auto;
}

.wwd-addon-text p {
    font-weight: 500;
}

@media screen and (max-width: 1200px) {
    .wwd-container {
        flex-wrap: wrap;
    }
    .wwd-box {
        width: calc(50% - var(--spacing) / 2);
    }
}

@media screen and (max-width: 1000px) {
    .about .container {
        flex-direction: column;
    }
    .gomlin {
        min-width: auto;
        max-width: 100%;
    }
}

@media screen and (max-width: 800px) {
    .wwd-box {
        width: 100%;
    }
    .wwd-addon-text p {
        text-align: left;
    }
}

@media screen and (min-width: 500px) {
    .gomlin {
        position: relative;
        top: 25px;
        width: 410px;
        min-width: 410px;
        height: 250px;
    }
    
    .gomlin div {
        position: absolute;
        font-weight: 700;
        font-size: 22px;
    }
    
    .gomlin div:after {
        content: '';
        position: absolute;
        width: 108px;
        height: 108px;
        background-image: url(../img/arrow-right.png);
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .gomlin div:nth-child(1) {
        top: 15%;
        left: 0;
    }
    
    .gomlin div:nth-child(1):after {
        top: 40px;
        left: 75px;
        transform: rotate(12.5deg);
    }
    
    .gomlin div:nth-child(2) {
        top: 15%;
        right: 0;
    }
    
    .gomlin div:nth-child(2):after {
        width: 128px;
        height: 128px;
        bottom: 0px;
        left: -107.5px;
        transform: rotate(140deg);
    }
    
    .gomlin div:nth-child(3) {
        bottom: var(--spacing);
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0);
    }
    
    .gomlin div:nth-child(3):after {
        bottom: 37px;
        right: -65px;
        transform: rotate(270deg);
    }
}

@media screen and (max-width: 500px) {
    .gomlin {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing);
    }
    .gomlin div {
        position: relative;
        font-weight: 700;
        font-size: 22px;
    }
    .gomlin div:after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        background-image: url(../img/arrow-right.png);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .gomlin div:nth-child(1):after {
        transform: rotate(130deg) scaleY(-1);
        top: 15px;
    }
    .gomlin div:nth-child(2):after {
        left: -42.5px;
        top: 15px;
        transform: rotate(35deg);
    }
    .gomlin div:nth-child(3):after {
        content: none;
    }
}