@use "../abstracts/mixins" as *;

#works + div {
	display: flex;
	align-items: center;

	@media only screen and (max-width: 720px) {
		flex-direction: column;
	}

	& > div:nth-of-type(2) {
		display: flex;
		flex-direction: column;

		.buttons {
			margin-block-start: auto;

			@media only screen and (max-width: 720px) {
				margin-block-start: 0;
			}
		}
	}

	#icons:nth-of-type(1) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-items: center;
		gap: 1rem;
		margin-inline-end: 1rem;
		border-radius: var(--rounded-corner);
		padding: 1rem;
		aspect-ratio: 1 / 1;
		height: fit-content;
		@include fancy-card;

		@media only screen and (max-width: 720px) {
			margin-inline-end: 0;
			aspect-ratio: unset;
		}

		img {
			cursor: zoom-in;
			margin: 0;
			width: 4rem;
			min-width: 4rem;
			height: 4rem;
			min-height: 4rem;

			&:hover {
				transform: scale(1.5);
			}

			@media only screen and (max-width: 720px) {
				width: 6rem;
				min-width: 6rem;
				height: 6rem;
				min-height: 6rem;
			}
		}
	}
}
