#blog {

    .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        align-items: center;

        .heading {
            display: grid;
            gap: 32px;
        }

        @media only screen and (max-width: 980px) {
            grid-template-columns: 1fr;
            gap: 32px;
        } 

    }

    .categories {
        display: flex;
        gap: 20px;
        justify-content: center;
        margin-block: 64px;


        @media only screen and (max-width: 980px) {
            display: none;        
        }
    }

    .featured {
        background: #FFF2FD;
        border-radius: 40px;
        padding: 64px 64px 0px 64px;

        @media only screen and (max-width: 980px) {
            padding: 32px 32px 0px 32px;
            border-radius: 30px;
            margin-bottom: 64px;
        } 

        a {
            display: block;

            &:hover {
                .image {
                    .link {
                        opacity: 1;
                    }
                }
            }
        }

        .image {
            position: relative;

            img {
                max-height: 550px;
                border-radius: 20px;
                object-fit: cover;
            }

            .link {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                opacity: 0;
                width: 50px;
                height: 50px;
                margin: auto;
                border-radius: 50%;
                background: var(--site-primary);
                color: #fff;
                font-size: 15px;
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                transition: all 0.3s;
            }   
        }

        .content {
            margin-top: 32px;
            border-radius: 20px 20px 0 0;
            padding: 42px 50px 0;
            box-sizing: border-box;
            background: #fff;
            display: grid;
            gap: 24px;
            align-items: center;           
            text-align: center;
        }

        .title {
            font-size: 40px;
        }

        .description {
            color: #666;;
        }
    }

    .wide {
        .list {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 100px 60px;
            align-content: baseline;    

            @media only screen and (max-width: 980px) {
                grid-template-columns: 1fr;
                gap: 64px;
            } 

            a {
                display: grid;
                gap: 28px;
                align-content: baseline;    
                text-align: center;

                &:hover {
                    .image {
                        .link {
                            opacity: 1;
                        }
                    }
                }

                @media only screen and (max-width: 980px) {
                    grid-template-columns: 1fr;
                }                   
            }       
        }

        .content {
            display: grid;
            gap: 15px;
            align-items: center;
        }

        .heading {
            font-size: 32px;
            color: #111;
            font-weight: 800;
            line-height: 1.1;
            position: relative;

            @media only screen and (max-width: 980px) {
                font-size: 24px;
            }               
        }

        .description {
            position: relative;
        }

        .date {
            text-transform: uppercase;
            font-weight: 600;
            font-size: 14px;
        }           

        .image {
            position: relative;
            overflow: hidden;     
            border-radius: 20px;
            background: #eee;

            img {
                display: block;
                aspect-ratio: 1/1;
                object-fit: cover;
            }

            .link {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                opacity: 0;
                width: 50px;
                height: 50px;
                margin: auto;
                border-radius: 50%;
                background: var(--site-primary);
                color: #fff;
                font-size: 15px;
                font-weight: 600;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s;
            }           
        }

        .reading {
            align-self: end;
        }   
    }

    [delayed] {
        a {
            .image {
                img {
                    opacity: 0;
                }
            }

            .image,
            .heading,
            .description {
                &:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    transform: translateX(-101%);
                    background: linear-gradient(100deg, transparent 25%, rgba(0, 0, 0, 0.05) 50%, transparent 75%);
                    animation: loadingGrid 1.5s ease infinite;
                }
            }

            .heading,
            .description {
                overflow: hidden;
                margin-inline: auto;
                background: #fff;
                border-radius: 150px;
                color: transparent;
                position: relative;
            }

            .heading {
                height: 30px;
                width: 50%;
            }

            .description {
                height: 20px;
            }
        }
    }
    
}