.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 26
}

#main {
    text-align: center;
    background-color: #FFF9F0;
    margin: 20px 0;
}

.slider {
    overflow: hidden;
    cursor: grab;
    mask-image: url(../img/mask.png);
    mask-position: center;
    mask-size: 1920px;
    height: 100%;
    width: 100%;
}

.slide-track {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease;
    height: 150%;
}

.slide-track img {
    width: 352px;
    flex-shrink: 0;
    pointer-events: none;
}

#about {
    width: 1240px;
    height: 560px;
    margin: 160px auto;
}

.square {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.square>div {
    background-color: #00DF7D;
    align-content: center;
    border-radius: 10px;
    margin: 20px 20px 20px 0;
    width: 610px;
    height: 190px;
    position: relative;
    padding: 20px 40px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 4fr 1fr;
}

.square>div:nth-child(3) {
    margin-top: 0;
}

.square>div:nth-child(4) {
    margin-top: 0;
}

.square>div>text {
    padding: 0 20px;
}

.circle {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-content: center;
    padding: 0 20px 0 0;
}

#product {
    width: 1240px;
    height: 960px;
    margin: 0 auto;
}

#product>div {
    float: left;
}

.product-1 {
    width: 400px;
    height: 718px;
    margin-top: 20px;
    margin-right: 20px;
    transition: 0.3s ease;
}

.product-1>h4 {
    text-align: center;
}

.product-1>h4:nth-child(2) {
    padding: 50px 0;
}

.product-1>h4:nth-child(3) {
    padding-bottom: 50px;
}

.sriracha {
    width: 300px;
    height: 450px;
    margin: 0 auto;
}

.product-1:hover {
    background-color: #FFD293;
    border-radius: 10px;
    transform: scale(1.03);
}

.product-2 {
    width: 400px;
    height: 718px;
    margin-top: 20px;
    margin-right: 20px;
    transition: 0.3s ease;
}

.product-2>h4 {
    text-align: center;
}

.product-2>h4:nth-child(2) {
    padding: 50px 0;
}

.product-2>h4:nth-child(3) {
    padding-bottom: 25px;
}

.chili {
    width: 300px;
    height: 445px;
    margin: 0 auto;
}

.chili> a > img {
    transform: translateY(20px);
}

.product-2:hover {
    background-color: #93FBFF;
    border-radius: 10px;
    transform: scale(1.03);
}

.product-3 {
    width: 400px;
    height: 718px;
    margin-top: 20px;
    transition: 0.3s ease;
}

.product-3>h4 {
    text-align: center;
}

.product-3>h4:nth-child(2) {
    padding: 50px 0;
}

.product-3>h4:nth-child(3) {
    padding-bottom: 50px;
}

.sambal {
    width: 300px;
    height: 445px;
    margin: 0 auto;
}

.product-3:hover {
    background-color: #FF9395;
    border-radius: 10px;
    transform: scale(1.03);
}