audi/app/assets/scss/style.scss

@font-face {
    font-family: 'AudiType';
    src: url('/fonts/AudiTypeVF.woff2') format('woff2-variations');
    font-display: swap;
    font-style: normal;
    font-stretch: 130%;
}

// Utility classes for padding and margin (1-100)
@for $i from 1 through 200 {
    // Padding
    .pt--#{$i} { padding-top: #{$i}px !important; }
    .pr--#{$i} { padding-right: #{$i}px !important; }
    .pb--#{$i} { padding-bottom: #{$i}px !important; }
    .pl--#{$i} { padding-left: #{$i}px !important; }
    .p--#{$i} { padding: #{$i}px !important; }

    // Margin
    .mt--#{$i} { margin-top: #{$i}px !important; }
    .mr--#{$i} { margin-right: #{$i}px !important; }
    .mb--#{$i} { margin-bottom: #{$i}px !important; }
    .ml--#{$i} { margin-left: #{$i}px !important; }
    .m--#{$i} { margin: #{$i}px !important; }
}

body{
    background-color: hsla(216, 23%, 8%, 1);
    color: rgb(252, 252, 253);
    font-family: 'AudiType';
    font-weight: 400;
}

*{
    background-repeat: no-repeat;
}

.ico, ::after, ::before{
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}

button{
    cursor: pointer;
}

header{
    width: 100%;
    .header--wrap{
        background-color: #020203;
        max-width: 1920px;
        width: 100%;
        margin: 0 auto;
        height: 72px;
        padding: 0 96px;
        display: flex;
        align-items: center;
    }
    .header--logo--wrap{
        margin-right: 40px;
    }
    .header--menu--wrap{
        display: flex;
        gap: 24px;
        >a{
            color: #fcfcfdb2;
            &:hover{
                color: hsla(216, 33%, 99%, 1);
            }
        }
    }
    .header--search--wrap{
        margin-left: auto;
        .search--btn{
            border-radius: 50%;
            padding: 0;
            background-image: url(/img/ico--search.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-color: transparent;
            width: 48px;
            height: 48px;
        }
    }
}

footer{
    width: 100%;
    .footer--wrap{
        background-color: #020203;
        max-width: 1920px;
        width: 100%;
        margin: 0 auto;
        height: 72px;
        padding: 0 96px;
        display: flex;
        align-items: center;
    }
}

main{
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    .title--wrap{
        padding: 40px;
        text-align: center;
        h2{
            font-size: 72px;
            margin-bottom: 24px;
        }
        p{
            color: rgba(252, 252, 253, 0.7);
            font-size: 16px;
        }
    }
    .content--wrap{
        padding: 40px 88px;
        .tech--card--wrap{
            display: flex;
            row-gap: 72px;
            column-gap: 16px;
            flex-wrap: wrap;
            .tech--card{
                width: calc((100% - 48px) / 4);
                display: flex;
                flex-direction: column;
                .img--wrap{
                    margin-bottom: 24px;
                    border-radius: 20px;
                    overflow: hidden;
                    >img{
                        width: 100%;
                        aspect-ratio: 16 / 9;
                        object-fit: cover;
                    }
                }
                >h3{
                    font-size: 24px;
                    margin-bottom: 8px;
                }
                >p{
                    margin-bottom: 24px;
                    color: rgba(252, 252, 253, 0.7);
                    font-size: 16px;
                    font-stretch: 105%;
                    &.type2{
                        margin-top: 40px;
                        color: rgba(252, 252, 253, 0.7);
                        font-size: 14px;
                    }
                }
                >a{
                    display: flex;
                    font-size: 16px;
                    text-underline-offset: 7px;
                    text-decoration: underline 1px rgb(252, 252, 253);
                    align-items: center;
                    .ico{
                        width: 24px;
                        height: 24px;
                        background-image: url(/img/ico--arrow.svg);
                    }
                }
            }
        }
    }
    .detail--container{
        .img--section{
            .img--wrap{
                overflow: hidden;
                border-radius: 20px;
                img{
                    width: 100%;
                    display: block;
                }
                video{
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: cover;
                }
            }
            &.none--bdrs{
                .img--wrap{
                    border-radius: 0;
                }
            }
            &.type2{
                display: flex;
                gap: 16px;
                .img--box{
                    width: 50%;
                }
            }
            .desc--wrap{
                margin-top: 24px;
                font-size: 16px;
            }
        }
        .title--section{
            text-align: center;
            padding: 64px 96px;
            >h2{
                margin-bottom: 24px;
                font-size: 44px;
            }
            >h3{
                font-size: 24px;
                margin-bottom: 24px;
            }
            >p{
                color: rgba(252, 252, 253, 0.7);
                font-size: 14px;
            }
        }
        .desc--section{
            padding: 64px 96px;
            margin: 0 auto;
            max-width: 950px;
            >h3{
                font-size: 36px;
                margin-bottom: 40px;
            }
            >p{
                margin: 0 auto;
                color: rgba(252, 252, 253, 0.7);
                font-size: 16px;
            }
            &.full--type{
                width: 100%;
                max-width: 100%;
                >h3{
                    margin-bottom: 16px;
                }
                >ul{
                    display: flex;
                    flex-direction: column;
                    gap: 24px;
                    >li{
                        font-size: 24px;
                    }
                }
            }
        }
        .img--desc--section{
            display: flex;
            padding: 64px 0;
            .img--wrap{
                width: 50%;
                border-radius: 20px;
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
            .desc--wrap{
                width: 50%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 0 72px;
                h3{
                    font-size: 36px;
                    margin-bottom: 8px;
                }
                p{
                    font-size: 16px;
                    color: rgba(252, 252, 253, 0.7);
                }
            }
        }
    }
}
.btn--gray{
    transition: all 0.3s;
    width: fit-content;
    font-size: 14px;
    font-weight: 400;
    padding: 12px 24px;
    color: #fff;
    border-radius: 100px;
    background-color: rgb(101, 112, 129);
    &:hover{
        background-color: rgb(44, 52, 63);
        box-shadow: rgba(219, 223, 230, 0.2) 0px 0px 0px 1px inset;
    }
}