#process {
	padding-top: 100px;

	.heading {
		display: grid;		
		gap: 10px;		
		background: #fff;	

		.wrap {
			display: grid;
			gap: 10px;
			padding-block: 50px;

			* {
				margin: 0;
				padding: 0;
			}			
		}
	}

	.list {
		display: flex;

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

		.item {
			position: relative;
			overflow: hidden;
			display: grid;
			gap: 20px;
			background-color: #000;
			background-size: cover;
			background-position: center;
    		line-height: 1;
    		padding: 30px;
    		transition: all 0.5s;

			flex-basis: 33vw;
			flex-direction: column;
			flex-grow: 1;

			min-height: 400px;
			cursor: pointer;

			* {
				position: relative;
				z-index: 1;
			}

			&:after {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: linear-gradient(45deg, black, rgba(0, 0, 0, 0.5));
			}

    		&.open {
    			flex-shrink: 0;
    			cursor: default;

    			.subtitle {
    				display: block;
    			}

    			.desc {
    				display: block;
    			}

    			span {
    				background: var(--site-primary);
    				color: #fff;
    				transform: rotate(45deg);
    			}
    		}

    		.top {
 				display: grid;
				gap: 20px;     
				justify-content: flex-start;  			
    		}

			.title {
			    font-size: 26px;
			    color: var(--site-primary);
			    font-weight: bold;
			    writing-mode: tb-rl;
			    transform:scale(-1);
			    text-transform: uppercase;
			    align-self: end;
			    letter-spacing: 1px;
			}

			.desc {
				line-height: 1.3;
				display: none;
				color: #fff;
			}

			.subtitle {
				display: none;
				color: #fff;
			}

			.num {
			    width: 20px;
			    height: 21px;
			    border-radius: 50%;
			    font-size: 11px;
			    color: #fff;
			    border: 1px solid;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			    transition: all 0.2s;
			}
		}
	}
}